android webview图片点击事件,设置 Webview 的图片的点击事件

在 js 代码中设置每个图片的点击事件

页面的点击事件中，调用设置好的交互接口来触发 Activity 的方法

JAVA 中设置交互接口 connect

获取到 WebView 的实例后添加交互接口

webview.addJavascriptInterface(new JavascriptImgInterface(), "connect");

第一个参数是重写的一个内部类，第二个参数设置交互接口的名字。

重写内部类

这个类的名字和 addJavascriptInterface 的参数一样即可

在重写的内部类中，使用注解标示可以被 js 调用的方法

class JavascriptImgInterface{

/**

* 在 Android4.2 极其以上系统需要给提供 js 调用的方法前加入一个注解：@JavaScriptInterface;

* 在虚拟机当中 Javascript 调用 JAVA 方法会检测这个 anotation，

* 如果方法被标识 @JavaScriptInterface 则 Javascript 可以成功调用这个Java 方法，否则调用不成功。

* @param img

*/

@JavascriptInterface

public void showImg(String img){

//利用js传过来的参数得到图片的地址

Intent intent = new Intent();

intent.putExtra("ImageUrl", img);

intent.setClass(ArticleActivity.this, ImageShowActivity.class);

startActivity(intent);

}

}

JavaScript 设置页面的图片点击事件

遍历网页中 img 标签，设置 onclick 事件，

function findImg(){

var objs = document.getElementsByTagName('img');

for(var i=0;i

objs[i].onclick=function(){

window.connect.showImg(this.src)

}

}

}

在点击事件中， JavaScript 调用了

window.connect.showImg();

这里的 connect 是 JAVA 中设置的交互接口的名字， showImg() 是被 @JavascriptInterface 注释的方法，并且将图片的 src 传递到 JAVA 中

部分源码

这里的例子中，访问服务器后会返回一个 JSON，里面有网页的 body、css 字段，利用这些字段和自定义的 JavaScript，拼接成一个 HTML 传给 WebView

//在onCreate里

//手动设置网页图片的点击事件

String javascript ="function findImg(){"+

"var objs = document.getElementsByTagName('img');"+

"for(var i=0;i

"objs[i].onclick=function(){" +

"window.connect.showImg(this.src)" +

"}"+

"}}";

//拼接成一个完成的 HTML，

String html = "

" +

""

+"

"+ body +"";

webview.loadDataWithBaseURL(null,html, "text/html", "utf-8", null);

WebSettings webSettings = webview.getSettings();

webSettings.setJavaScriptEnabled(true);// 启动js脚本

webview.addJavascriptInterface(new JavascriptImgInterface(), "connect");

webview.setWebViewClient(new WebViewClient(){

@Override

public void onPageFinished(WebView view, String url) {

String call = "javascript:findImg()";

webview.loadUrl(call);

super.onPageFinished(view, url);

}

});

//内部类

class JavascriptImgInterface{

/**

* 注意： 在Android4.2极其以上系统需要给提供js调用的方法前加入一个注释：@JavaScriptInterface;

* 如果方法被标识@JavaScriptInterface则Js可以成功调用这个Java方法，否则调用不成功。

* @param img

*/

@JavascriptInterface

public void showImg(String img){

//利用js传过来的参数得到图片的地址

Log.d("HERE", "showImg: "+img);

Intent intent = new Intent();

intent.putExtra("ImageUrl", img);

intent.setClass(ArticleActivity.this, ImageShowActivity.class);

startActivity(intent);

}

}