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

原因

本例中加载的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.js
test:http://192.168.24.65:63232/main.js

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

拓展

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 123,010评论 18 134
  • WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一种新的协议。它实...
    挣奶粉的打工人阅读 17,793评论 8 173
  • 这篇博客主要来介绍 WebView 的相关使用方法,常见的几个漏洞,开发中可能遇到的坑和最后解决相应漏洞的源码,以...
    Shawn_Dut阅读 5,378评论 3 52
  • “玉帝,且不论他孙悟空总是触犯您,就凭他帮着刘沉香对抗二郎神都够治他的罪了!您还犹豫个什么玩意儿。”说话的是托塔李...
    鬼虎阅读 204评论 0 1
  • -a (all)显示所有选项,默认不显示LISTEN相关-t (tcp)仅显示tcp相关选项-u (udp)仅显示...
    狗尾巴草败了阅读 237评论 0 0
  • 《啊哈!算法》第 1 章第 3 节,快速排序的 Swift 实现 问题 为给定数字序列排序 解决 以左侧第一个位置...
    su3阅读 35评论 0 0
  • 梦见回到家里了。 爷爷在那说,窗外的树有几百年历史了吧,我说没有的,搬过来的时候种的,十几年吧。 顿时惊醒,鼻子一...
    我不是注销了吗阅读 48评论 2 0