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方式来实现本例的需求也可以。


  • 2020-03-09 21:37:10

    安卓Tv端App开发与手机端的开发的区别

    因为大部分电视机的配置一般都比手机低,但是电视机一般都是用来看视频的,所以在做视频解码的时候,因为电视机配置比较低,所以大多数手机运行流畅的播放器在电视机上面都会卡顿,或者出现一些其他的问题,经过我同事长时间的测试,认为百度播放器跟小米播放器比较适合电视机作为播放器开发使用。如果你们要选择一个播放器,要先拿一个demo去很多台不同类型的电视机去测试,因为网络上面的播放器在电视机卡的真的很多,先测试好了再使用可以节约大家的时间。

  • 2020-03-09 22:11:39

    聊聊真实的 Android TV 开发技术栈

    智能电视越来越普及了,华为说四月发布智能电视跳票了,一加也说今后要布局智能电视,在智能电视方向,小米已经算是先驱了。但是还有不少开发把智能电视简单的理解成手机屏幕的放大,其实这两者并不一样。

  • 2020-03-11 09:43:20

    JavaScript shift() 方法

    shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。

  • 2020-03-11 09:45:19

    45个优秀的vue开源项目

    在过去一年里,前端开发发展迅速,前端工程师的薪资亦是水涨船高。2019 更是热度不减,而作为近年来尤为热门的前端框架,Vue.js 自是积累了大量关注。本文将为你介绍 2019 年最值得关注的 45 个 Vue.js 开源项目——Let's go!

  • 2020-03-11 18:26:52

    Mac设置ADB

    adb在 ~/Library/Android/sdk/platform-tools文件夹内

  • 2020-03-11 19:40:56

    java.util.zip.ZipException: zip file is empty

    三、总结 出现 java.util.zip.ZipException: zip file is empty错误,表示你本地使用的jar包或者aar包可能为空,你可以检查下文件大小,如果为空,可以替换本地的jar包或者aar包为正常的jar包或者aar包,或者如果官方有相关的资源的话直接使用官方的依赖资源即可。