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


  • 2017-09-11 16:15:11

    Nginx日志管理

    通过访问日志,你可以得到用户地域来源、跳转来源、使用终端、某个URL访问量等相关信息;通过错误日志,你可以得到系统某个服务或server的性能瓶颈等。因此,将日志好好利用,你可以得到很多有价值的信息。

  • 2017-09-11 16:34:14

    Nginx如何保留真实IP和获取前端IP

    squid,varnish以及nginx等,在做反向代理的时候,因为要代替客户端去访问服务器,所以,当请求包经过反向代理后,在代理服务器这里这个IP数据包的IP包头做了修改,最终后端web服务器得到的数据包的头部的源IP地址是代理服务器的IP地址,这样一来,后端服务器的程序给予IP的统计功能就没有任何意义,所以在做代理或集群的时候必须解决这个问题,这里,我以nginx做集群或代理的时候如何给后端web服务器保留(确切的说是传递)客户端的真实IP地址。

  • 2017-09-11 16:35:22

    ngx_http_realip_module使用详解

    网络上关于ngx_http_realip_module的文章千篇一律,全是在说怎么安装,最多贴一个示例配置,却没有说怎么用,为什么这么用,官网文档写得也十分简略,于是就自己探索了一下。

  • 2017-09-11 16:39:43

    基于Nginx dyups模块的站点动态上下线

    在分布式服务下,我们会用nginx做负载均衡, 业务站点访问某服务站点的时候, 统一走nginx, 然后nginx根据一定的轮询策略,将请求路由到后端一台指定的服务器上。

  • 2017-09-13 13:49:21

    Web性能测试:工具之Siege详解

    Siege是一款开源的压力测试工具,设计用于评估WEB应用在压力下的承受能力。可以根据配置对一个WEB站点进行多用户的并发访问,记录每个用户所有请求过程的相应时间,并在一定数量的并发访问下重复进行。siege可以从您选择的预置列表中请求随机的URL。所以siege可用于仿真用户请求负载,而ab则不能。但不要使用siege来执行最高性能基准调校测试,这方面ab就准确很多

  • 2017-09-14 10:18:25

    15分钟成为Git专家

    不管是以前使用过 Git 还是刚开始使用这个神奇的版本控制工具的开发者,阅读了本文以后都会收获颇丰。如果你是应一名有经验的 GIT 使用者,你会更好的理解 checkout -> modify -> commit 这个过程。如果你刚开始使用 Git,本文将给你一个很好的开端。

  • 2017-09-28 16:42:57

    Linux vmstat命令实战详解

    vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况。这个命令是我查看Linux/Unix最喜爱的命令,一个是Linux/Unix都支持,二是相比top,我可以看到整个机器的CPU,内存,IO的使用情况,而不是单单看到各个进程的CPU使用率和内存使用率(使用场景不一样)。