Android-WebView中远端链接使用本地js文件

2017-03-24 15:28:25

原因

本例中加载的js库是 jQuery
放在本地的原因是:
1.js库本身挺大,浪费流量
2.js库可能常年不更新

步骤

0.当然是把js文件放到assets目录中

Android Studio的assets目录默认不存在,需要手动创建
位置是 src/main/assets/jquery.js
1.一定要注意设置setJavaScriptEnabled为true,不管是使用远程或本地js都需要设置

mWebView.getSettings().setJavaScriptEnabled(true);

2.设置WebViewClient

mWebView.setWebViewClient(new WebViewClient() {            /**
             *
             * @return 本地jquery
             */
            private WebResourceResponse editResponse() {                try {                    return new WebResourceResponse("application/x-javascript", "utf-8", getAssets().open("jquery.js"));
                } catch (IOException e) {
                    e.printStackTrace();
                }                //需处理特殊情况
                return null;
            }            @Override
            public WebResourceResponse shouldInterceptRequest(WebView view, String url) {                if (Build.VERSION.SDK_INT < 21) {                    if (url.contains("jquery")) {                        return editResponse();
                    }
                }                return super.shouldInterceptRequest(view, url);
            }            @Override
            public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {                if (Build.VERSION.SDK_INT >= 21) {
                    String url = request.getUrl().toString();                    if (!TextUtils.isEmpty(url) && url.contains("jquery")) {                        return editResponse();
                    }
                }                return super.shouldInterceptRequest(view, request);
            }
        });

3.加载远程链接

mWebView.loadUrl("http://192.168.24.65:63232");

注意

public WebResourceResponse(String mimeType, String encoding, InputStream data)
第一个参数mimeType
查询地址: MIME-type
第二个参数编码类型
第三个参数输入流

原理

不管是js资源,图片资源,都是由一个一个请求获取的

//打印shouldInterceptRequest方法的url参数如下test:http://192.168.24.65:63232/jquery.jstest:http://192.168.24.65:63232/main.js

shouldInterceptRequest()方法就是每次请求完毕就会回调的方法。正常是通过网络获取response,我们在每次请求的url上面做判断,发现jquery.js打断正常运行,自行构造一个本地response返回给WebView实现本地的加载。

拓展

另外一种实现方法是,把远端的网页文件下载本地,js文件依然内置,通过本地加载html方式来实现本例的需求也可以。


  • 2019-10-19 16:35:45

    Vue.directive使用注意

    首先,Vue.directive要在实例初始化之前,不然会报错,还有,定义的指令不支持驼峰式写法,也会报下面同样的错,虽然在源码中没有找到在哪里统一处理大小写,但是在有关directive的方法中捕捉到的指令命名统一变为小写,所以,还是用'-'或者'_'分割吧。

  • 2019-10-21 08:39:54

    vue slot用法以及使用介绍

    通过上面的内容可以知道,在slot组件中引入了slot的子组件,而且又在子组件标签内添加了新的标签内容,但页面上并没有将子组件标签内的标签内容显示出来,

  • 2019-10-21 15:06:27

    yarn详细入门教程

    Yarn 是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。就像我们可以从官方文档了解那样,它的目的是解决这些团队使用 npm 面临的少数问题,即:

  • 2019-10-23 10:20:48

    php 去掉 头尾 空格 2种方法

    看似很简单的问题,其实还是有点坑的,首先这里&nbsp;空格转义,不是字符串,直接用trim()是去不掉。

  • 2019-10-23 23:25:22

    PostMapping,GetMapping不固定路径的写法

    PostMapping中的value属性是数组,所以可以定义多个路径,required属性默认是true,不必再写required=true,默认表示该参数是必须要有的,如果写required=false,表示该参数是可选的,可有可无。

  • 2019-10-24 01:14:29

    通过属性搜索商品mysql设计

    属性是可以动态扩展的,问题:属性是搜索条件 问:请展示出 材质为塑料 防水为YES,颜色为绿色的商品详细信息,按照sort_filed排序

  • 2019-10-25 15:18:18

    Vue.use Vue.prototype区别

    1、不是为了vue写的插件(插件内要处理)不支持Vue.use()加载方式 2、非vue官方库不支持new Vue()方式 3、每一个vue组件都是Vue的实例,所以组件内this可以拿到Vue.prototype上添加的属性和方法。