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-08 13:14:44

    MySQL 批量修改表名

    功能:将数据库 booksystem 中的表名前缀是 sys_ 开头的表名替换 sys_ 为 qun_

  • 2019-10-08 13:26:19

    详解Linux服务器最大tcp连接数

    1全部作为client端的情况下,最大tcp连接数为65535,这些连接可以连到不同的server ip。 2对server端,通过增加内存、修改最大文件描述符个数等参数,单机最大并发TCP连接数超过10万 是没问题的,国外 Urban Airship 公司在产品环境中已做到 50 万并发 。

  • 2019-10-08 14:09:57

    git创建分支并提交到远程分支

    远程分支的创建,一般都是基于本地分支的。即将本地的某个分支提交到远程,作为远程分支。命令如下:

  • 2019-10-09 13:38:20

    NPM依赖包版本号~和^和*的区别

    ~ 会匹配最近的小版本依赖包,比如~1.2.3会匹配所有1.2.x版本,但是不包括1.3.0 ^ 会匹配最新的大版本依赖包,比如^1.2.3会匹配所有1.x.x的包,包括1.3.0,但是不包括2.0.0 * 这意味着安装最新版本的依赖包

  • 2019-10-09 14:39:40

    import双反斜杠\\的意思

    ​ \表示引用根目录下面的PHPEXcel;不用\的话是引用当前目录下面的 PHPExcel

  • 2019-10-09 15:33:31

    nuxt,nuxtjs简单介绍以及使用

    在集成的服务器端框架之间进行选择: 选择您喜欢的 UI 框架: 选择您喜欢的测试框架: 选择你想要的 Nuxt 模式 (Universal or SPA) 添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。 添加 EsLint 以在保存时代码规范和错误检查您的代码。 添加 Prettier 以在保存时格式化/美化您的代码。