之前写过几篇博客是关于webview的简单使用以及怎么和js交互。
对webview的使用和跟网页交互还不太了解的同学可以先看看。
webview的简单使用
Android跟网页的交互
给webview添加进度条
本片博客的demo是基于下面这篇博客的一个demo编写的
在之前的android加载网页调相机拍照并显示的博客中,我是加载了本地的网页,然后调拍照显示图片到网页上,这是没问题的。
但是,当我把网页放到服务器上,这个时候webview加载的是服务器上的网页了,在调相机拍照拿手机上的图片就会报Not allowed to load local resource 错误
网页还是以前的网页,什么都没改,这是放到了服务器而已,加载的是服务端的网页
webView.loadUrl("http://yuzhiqiang.name/testWebView/index.html");
我们来看看运行效果:
可以看到,图片并没有显示到网页上,打开控制台可以看到,我们已经调用了显示图片的方法,但是报了Not allowed to load local resource这个错误。
原因
为什么加载本地网页就可以,而加载服务器上面的页面就不行呢?
这是因为我们在加载本地网页是使用的是file:/// 去拿本地的数据,这个时候因为本地网页也是通过file:///去加载的,所以是可以拿到数据的,但是,当我们使用http协议去加载网页时,再通过file:///拿图片由于安全原因是不被允许的。所以就会报类似下面的错误:
Not allowed to load local resource: file:///xxxxxx"
解决办法
解决办法就是模拟http请求,然后通过重写shouldInterceptRequest方法拦截请求,重新构造WebResourceResponse,通过流的方式将数据传递给前端,返回自己构造的WebResourceResponse即可。
下面看看具体的代码实现,我这边需要传递的是图片:
首先要跟前端页面约定一个字段,用来表示我要传递的图片。
首先先修改前端显示图片代码,主要就是将displayImg()方法中的file:/// 修改为 约定好的key
下面是要加载的网页代码
var imgDom;
$(function() {
/*点击事件*/
$("img").on("click", function() {
console.log("点击调android拍照");
imgDom = this; //将当前点击的img标签赋给变量imgDom
console.log("当前节点:" + imgDom);
window.android.takePhoto();
});
});
/*显示图片*/
function displayImg(path) {
console.log("显示图片");
/*约定的key*/
var androidImgKey="http://androidimg"
$(imgDom).attr("src", androidImgKey + path);
}
android端代码:
主要是重写shouldInterceptRequest方法
@Override
public WebResourceResponse shouldInterceptRequest(WebView webView, WebResourceRequest webResourceRequest) {
FileInputStream input;
String url = webResourceRequest.getUrl().toString();
String key = "http://androidimg";
/*如果请求包含约定的字段 说明是要拿本地的图片*/
if (url.contains(key)) {
String imgPath = url.replace(key, "");
L.i("本地图片路径:" + imgPath.trim());
try {
/*重新构造WebResourceResponse 将数据已流的方式传入*/
input = new FileInputStream(new File(imgPath.trim()));
WebResourceResponse response = new WebResourceResponse("image/jpg", "UTF-8", input);
/*返回WebResourceResponse*/
return response;
} catch (FileNotFoundException e) {
e.printStackTrace();
}
}
return super.shouldInterceptRequest(webView, webResourceRequest);
}
然后再来看看运行效果:
可以看到,我们已经顺利的拿到数据了。
希望能帮到你,下面是demo。可以把页面改成自己服务器上面的页面
如果你觉得本文对你有帮助,麻烦动动手指顶一下,算是对本文的一个认可,如果文中有什么错误的地方,还望指正,转载请注明转自喻志强的博客 ,谢谢!