在WebView中加载的是Html也面,在开发中都是Web前端人员写好以后给个链接我们去用webView进行loadUrl。但是有时突然产品想让你把加载回来的图片进行大图的展示,比如单击或者长按查看大图,但是webView控件的点击事件并没有作用!!!以下是实现的思路
- 首先我们拿到html中加载图片的标签img.
- 然后取出其对应的src属性
- 循环遍历设置图片的点击事件
- 将src作为参数传给java代码
//java回调js代码,不要忘了@JavascriptInterface这个注解,不然点击事件不起作用
mWebView.addJavascriptInterface(new JsCallJavaObj() {
@JavascriptInterface
@Override
public void showBigImg(String url) {
Toast.makeText(mContext, "圖片路勁"+url, Toast.LENGTH_SHORT).show();
Intent intent = new Intent(mContext, BigImageActivity.class);
intent.putExtra(Constants.IMG_URL,url);
startActivity(intent);
}
},"jsCallJavaObj");
mWebView.setWebViewClient(new WebViewClient(){
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
setWebImageClick(view);
}
});
/**
* 設置網頁中圖片的點擊事件
* @param view
*/
private void setWebImageClick(WebView view) {
String jsCode="javascript:(function(){" +
"var imgs=document.getElementsByTagName(\"img\");" +
"for(var i=0;i<imgs.length;i++){" +
"imgs[i].onclick=function(){" +
"window.jsCallJavaObj.showBigImg(this.src);" +
"}}})()";
mWebView.loadUrl(jsCode);
}
/**
* Js調用Java接口
*/
private interface JsCallJavaObj{
void showBigImg(String url);
}
实现功能的核心就是这段Js代码,也就是jsCode这个变量。通过document对象的getElementsByTagName方法去获取到img标签。然后通过循环去遍历设置其对应的点击事件。
window.jsCallJavaObj.showBigImg(this.src) 其中jsCallJavaObj是我们在java代码中所定义的一个接口的对象,showBigImg()是这个接口中的回调方法。this.src就是当前点击图片的url.
注意:上面的js代码书写一定不能有误,不然就做了无用功了,以javascript:(参数)开始,以()结束。
原文链接:https://blog.csdn.net/Jiang_Rong_Tao/article/details/58586041