- 在 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.length;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.length;i++){"+
"objs[i].onclick=function(){" +
"window.connect.showImg(this.src)" +
"}"+
"}}";
//拼接成一个完成的 HTML，
String html = "<html><head><style type='text/css'>"+ css +"</style>" +
"<script> " + javascript + " </script></head>"
+"<body>"+ body +"</body></html>";
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);
}
}
