WebView远程网页加载本地资源与Not allowed to load local res... - 简书

1,505 阅读2分钟
原文链接: www.jianshu.com

       背景说明:

        最近一直忙于WebView加载H5网页的优化,其中有个优化路径就是。将H5端引用的不经常变换的js库放到App本地资源中,H5加载本地资源避免加载远程的时间与流量消耗。朝着这个目标,开始进行编码;

     一、通过WebView的动态注入JS特性加载本地JS资源

           在只需要注册单个JS文件时,可以采用将本地的js文件读取出来,通过mWebview.loadUrl(“javascript:读出的js”)来完成动态注册;

但是需要注意几点。首先,需要注意动态注入的时机点,一般在网页加载完成后才启动本地注入;其次,针对android 4.4以上,可以使用mWebview.evaluateJavascript(js, callback)来执行动态注入;

Android 端注入jquery_min.js:

          H5端使用jquery:就可以正常的使用动态注入的js提供的方法了。针对可能出现的注入延迟,可以通过H5端等待调用或native主动通知H5注入完成等方式解决

     二、通过file://xxx.js加载本地资源

        起初认为只要H5端如下:

 <script src="file:///android_asset/jquery_min.js"></script> 去加载本地资源,但这个时候你会发现对应的js并没有成果加载,log中打印出错误日志:

       这是因为我们加载远程网页使用的是http或https协议,加载本地文件使用的是file协议,浏览器有安全校验,不支持该类型的使用;这时我们需要怎么处理那?

       见下图。WebView在加载网页外部资源的时候,都会调用shouldInterceptRequest方法(特别说明:http网页在加载file协议时,因为报错就不会走这个方法),我们重写WebViewClient的shouldInterceptRequest(WebView view, String url)方法。我们与H5端约束好的规范,针对特定的url做拦截,使用本地资源替换远程资源,实现本地的资源加载

例如,现在约定将拦截所有url请求中包含assets/mathjax字符串的url请求。从assets/mathjax开始截取路径,按照截取的路径到asset资源下去加载资源;

如asset资源如下:

网页中请求:http://192.168.12.2/assets/mathjax/latest.js页,我们截取路径assets/mathjax/latest.js。到assets资源下去读取文件;具体实现如下:

通过shouldInterceptRequest方法的拦截,按照约束好的规则,返回不同资源的WebResourceResponse,替换我们指定的资源为本地资源。