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