原生APP固然高效,灵活度却有所欠缺。因此 App 的混合开发愈加盛行,而最简单的方式就包括采用 WebView 进行展示某些网页。WebView 和 JS 的交互必不可少。今天就来说一个常见的情景:点击 WebView 网页中的图片,放大进行展示。
需求
点击WebView网页中的图片,进行放大查看。
分析
首先明确的是:这个工作可以交给web前端工程师去做,网页自行处理点击放大查看的操作。如果你足够懒的话,可以甩锅~ ~ 不过,一两个网页还好,多了的话,怕是web工程师要拿着板砖来商量了~ 保命的话,就得研究其它方法。
emm……可以单独新建一个 Activity 展示大图。那么还有两个问题:
1. 怎么获取webview中的图片地址?
略微有些html知识的人,都会知道,网页中几乎都是用 img 标签来展示图片,那么我们就可以通过【正则表达式】来获取到图片的地址。
2. 怎么判断点击了webview中的图片?
首先来讲,安卓已经把焦点给了webview,很难再判断是否点击了图片。相反,webview却可以通过【设置监听】的方法轻易实现,再通过 【WebView 和 js】 的交互就可以轻易判断。
因此在加载完成后自行添加入图片点击监听的代码,判断点击的时候,进行交互调用安卓方法即可。因为涉及到 js 交互,所以webview也需要使能相应设置。
简单分析,轻易可得实现步骤应该如下:
- 初始化webview设置,加载网页。
- 加载完成后,遍历 html 标签,找到所有的 img 标签节点。
- 给 遍历到得 img 标签节点加上 onClick 事件。
- 判断点击图片时,通过 JS 交互调用原生控件,放大展示。
实现
1. WebView 初始化
mWebView
WebView mWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = mWebView.getSettings();
// 使能 Js 交互
webSettings.setJavaScriptEnabled(true);
// 加载网页
mWebView.loadUrl("https://image.baidu.com/");
// 设置js交互接口
mWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");
// js通信接口
public class JavascriptInterface {
private Context context;
public JavascriptInterface(Context context) {
this.context = context;
}
@android.webkit.JavascriptInterface
public void openImage(String img) {
Intent intent = new Intent(context, ImageActivity.class);
intent.putExtra("img", img);
context.startActivity(intent);
}
}
2. 遍历 img 节点,加入监听
javascript: (function() {
var objs = document.getElementsByTagName("img");
for (var i = 0; i < objs.length; i++) {
objs[i].onclick = function() {
window.imagelistner.openImage(this.src);
}
}
})()
mWebView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
//通过js函数的功能注册监听,遍历img标签并添加onClick函数,函数的功能是在图片点击的时候调用本地java接口并传递url过去
mWebView.loadUrl("javascript:(function(){"
+ "var objs = document.getElementsByTagName(\"img\"); "
+ "for(var i=0;i<objs.length;i++) " + "{"
+ " objs[i].οnclick=function() " + " { "
+ " window.imagelistner.openImage(this.src); "
+ " } " + "}" + "})()");
}
});
}