cordova 远程h5页面调用本地js

news/2023/12/9 15:57:14

如何在本地webview打开 远程h5页面;

有的时候,想要在app上直接调试样式,功能等,但是每次修改后都要重新部署,很是麻烦,因此,参考各方文档后,了解到个人认为最优的解决方案,方案如下:

默认情况下打开远程h5页面会调用本地浏览器打开;所以我们需要在cofig.xml添加代码;

    <allow-navigation href="http://*/*" />
    <allow-navigation href="https://*/*" />
    
    <content src="url">//这个是启动是打开的页面

第一步就完成了。

h5页面调用本地插件接口

方法一:首先本地先安装好插件,然后就是简单粗暴将cordova.js plugin等所有js文件一起放在服务器上。h5页面只需要引用cordova.js即可(所需文件在platforms/andriod/assets/www/)亦或(platforms/andriod/platform_www);这种方法缺点很多,比如下载的流量会增加,无法通过appstore审核;

方法二:上面的js文件是放在服务器上的,那么我们是不是可以直接让h5使用本地cordova.js等文件,这样就不存在重新下那么多js文件的问题了。

<script src="file:///android_asset/www/cordova.js" type="text/javascript" charset="UTF-8"></script>

不过遇到了一个错误:
Not allowed to load local resource: file:///android_asset/www/cordova.js
意思是http协议下禁止通过file://方式访问本地的文件。

不过如果cordova app就是访问的file://android_asset/www/index.html的话,加载其它file://资源是没问题的。

这是webview的一种安全机制。

解决办法是,通过拦截webview的请求,实现加载本地js,具体如下:

打开platforms/andriod/CordovaLibsrcorgapachecordovaengineSystemWebViewClient.java

public void clearAuthenticationTokens() {
    this.authenticationTokens.clear();
}

private static final String INJECTION_TOKEN = "http://injection/"; //新增

@TargetApi(Build.VERSION_CODES.HONEYCOMB)
@Override
public WebResourceResponse shouldInterceptRequest(WebView view, String url) {

    ---新增---
    if(url != null && url.contains(INJECTION_TOKEN)) {
        String assetPath = url.substring(url.indexOf(INJECTION_TOKEN) + INJECTION_TOKEN.length(), url.length());
        try {
            WebResourceResponse response = new WebResourceResponse(
                    "application/javascript",
                    "UTF8",
                    view.getContext().getAssets().open(assetPath)
            );
            return response;
        } catch (IOException e) {
            e.printStackTrace(); // Failed to load asset file
            return new WebResourceResponse("text/plain", "UTF-8", null);
        }
    }
    ---新增---
    try {

        // Check the against the whitelist and lock out access to the WebView directory
        // Changing this will cause problems for your application
        if (!parentEngine.pluginManager.shouldAllowRequest(url)) {
            LOG.w(TAG, "URL blocked by whitelist: " + url);
            // Results in a 404.
            return new WebResourceResponse("text/plain", "UTF-8", null);
        }

        CordovaResourceApi resourceApi = parentEngine.resourceApi;
        Uri origUri = Uri.parse(url);
        // Allow plugins to intercept WebView requests.
        Uri remappedUri = resourceApi.remapUri(origUri);

        if (!origUri.equals(remappedUri) || needsSpecialsInAssetUrlFix(origUri) || needsKitKatContentUrlFix(origUri)) {
            CordovaResourceApi.OpenForReadResult result = resourceApi.openForRead(remappedUri, true);
            return new WebResourceResponse(result.mimeType, "UTF-8", result.inputStream);
        }
        // If we don't need to special-case the request, let the browser load it.
        return null;
    } catch (IOException e) {
        if (!(e instanceof FileNotFoundException)) {
            LOG.e(TAG, "Error occurred while loading a file (returning a 404).", e);
        }
        // Results in a 404.
        return new WebResourceResponse("text/plain", "UTF-8", null);
    }
}

注意:如果你用了cordova-plugin-crosswalk-webview插件,则需要打开cordova-plugin-crosswalk-webviewplatformsandroidsrcorgcrosswalkengineXWalkCordovaResourceClient.java

修改shouldInterceptLoadRequest方法。

最后我们把外链的h5页面中cordova.js路径改成下面的;

 <script src="http://injection/www/cordova.js" type="text/javascript" charset="UTF-8"></script>

思路是:既然不允许访问"file://,那我就设法改为http://,然后拦截webview的请求,对http://injection/开头的请求,手动返回对应文件的具体内容。

最后重新打包就可以了。。。

clipboard.png


http://www.niftyadmin.cn/n/3332331.html

相关文章

我的第一个 RN 项目-趣闻

代码地址如下&#xff1a;http://www.demodashi.com/demo/13486.html 项目预览 IOS&#xff1a; Android&#xff1a; 扫描体验&#xff1a; 或者点我 整体功能跟之前小程序和 Android 项目的大差不差&#xff0c;主要包括四大模块&#xff1a;新闻、段子、历史上的今天和小爱同…

【Uni-App】用 uView 组件库中的u-picker 实现地区的 省-市-区 三级联动确认回显

目录一&#xff1a;准备工作二&#xff1a;json文件数据例1例2三&#xff1a;先做个按钮做弹窗显示四&#xff1a;使用组件五&#xff1a;用到的变量六&#xff1a;初始化数据七&#xff1a;数据变更时的方法八&#xff1a;点击确认时的方法九&#xff1a;数据的回填这是选中效…

SpringBoot | 第十八章:web应用开发之WebJars使用

2019独角兽企业重金招聘Python工程师标准>>> 前言 前面一章节我们主要讲解了关于文件上传的两种方式。本章节继续web开发的相关知识点。通常对于web开发而言&#xff0c;像js、css、images等静态资源版本管理是比较混乱的&#xff0c;比如Jquery、Bootstrap、Vue.js…

10A 的GROUP和CUI使用

Group结构图 1、group的定义 定义group ID和定义Screen ID一样 在XXX.res 中定义 <SCREEN id"GRP_ID_MYAPP_5"/>//group id <SCREEN id"GRP_ID_MYAPP_6"/>//group id <SCREEN id"SCR_ID_MYAPP_5"/>//screen id <SCRE…

Android Makefile分析

随着移动互联网的发展&#xff0c;移动开发也越来越吃香了&#xff0c;目前最火的莫过于android&#xff0c;android是什么就不用说了&#xff0c;android自从开源以来&#xff0c;就受到很多人的追捧。当然&#xff0c;一部人追捧它是因为它是Google 开发的。对一个程序员来说…

Android Launcher全面剖析

首先来说说我为什么写这篇文章&#xff0c;最近公司要我负责搞Launcher&#xff0c;网上一查这方面的资料比较少&#xff0c;并且不全&#xff0c;研究起来相当困难&#xff0c;所以就写了这篇文章&#xff0c;希望对大家有帮助。这篇文章是相当长的&#xff0c;希望读者能耐心…

【前端思维导图】 => 从零基础到中高级前端的体系化思维导图笔记(持续更新笔记中...)

目录HTML CSS基础HTML5 CSS3 阶段JS 基础Web APIjQueryJS 高级Git 使用AJAX 基础服务端Nodejs编程阿里百秀项目VueReactHTML CSS基础 第 1 天&#xff1a;https://www.processon.com/view/link/5ec484760791290fe072eaf8 第 2 天&#xff1a;https://www.processon.com/view/l…

浅谈android中的目录结构

转自浅谈android中的目录结构 Google Android手机的软件为了安全性和稳定性都是默认安装到手机内存里&#xff0c;但是手机内存有限&#xff0c;所以我们会做app2sd操作&#xff0c;来让我们安装的软件放到sd卡上&#xff0c;这个操作是需要rom的支持的。 Android 2.2 可以将…

企业微信 => 企业微信接入第三方应用(vue的H5) 第一阶段:授权登录 前端部分

企业微信接入第三方应用企业微信接入第三方应用&#xff08;以服务商身份&#xff09;一.确认我们是第三方应用开发还是企业内部开发选项&#xff08;对后面有很大区别&#xff09;二.需要的准备&#xff1a;注册两个企业&#xff0c;一个作为应用的服务商&#xff0c;一个作为…

Android 百度地图 SDK v3.0.0 (三) 添加覆盖物Marker与InfoWindow的使用

转载请标明出处&#xff1a;http://blog.csdn.net/lmj623565791/article/details/37737213上篇博客已经实现了地图的定位以及结合了方向传感器用户路痴定位方向&#xff0c;如果你还不清楚&#xff0c;请查看&#xff1a;Android 百度地图 SDK v3.0.0 &#xff08;二&#xff0…

Android Widget点击事件

在appWidget中&#xff0c;ImageButton和Button都是被支持的控件&#xff0c;其事件可分成三种类型&#xff1a; 一、开启Activity 二、开始Service 三、发送按钮Action下面开始一个一个分析&#xff0c;如何实现。一、开启Activity1、首先先定义个开启Activity的intenteg: In…

查看和配置npm包

查看本地已经安装的node包; npm list --depth0 list/ls/la(会列出包的信息)/ll(会列出包的信息) --depth0/--depth 0(不显示深层的node包) 查看全局安装的node包npm list --depth0 -g-g/--global(全局)查看本地安装路径npm root查看全局安装路径npm root -g查看npm配置npm conf…

JDBC(一)简介

一&#xff0c;什么是JDBC JDBC&#xff0c;即java database connectivity&#xff0c;是一套用于访问数据库但不依赖于数据库类型的JAVA API。 JDBC库包含了数据库的常用使用方法的API实现&#xff0c;基本如下&#xff1a; 数据库连接创建SQL语句执行SQL语句浏览及修改返回的…

企业微信 => 接入第三方vue应用 第二阶段:优化成无感授权登录 前端部分

第一阶段的登录虽然也算完成了&#xff0c;但是并不是最优的登陆方式后面有了新的思路可以在路由守卫里面进行操作下面先记录一下思路&#xff0c;回顾一下 1.重构一下router模块 在router模块下面有一个index.js import Vue from vue import VueRouter from vue-router imp…

Java 使用 int 数据计算百分比

int diliverNum3;//举例子的变量 int queryMailNum9;//举例子的变量 // 创建一个数值格式化对象 NumberFormat numberFormat NumberFormat.getInstance(); // 设置精确到小数点后2位 numberFormat.setMaximumFractionDigits(2); String result numberFormat.form…

还原数据自动管理的一些参数和获得还原数据信息

还原数据自动管理的一些参数和获得还原数据信息 一、oracle还原数据自动管理的一些参数&#xff1a; 1、oracle 9i之前的一些程序中开发的脚步上包含手动指定回滚段的语句。这样的语句在执行是虽然对最终结果没有影响但是会在控制台报错&#xff0c;对用户的感觉不好。故引入动…
最新文章