监听WebView页面上所有的图片
有两周没写简书了，有一丢丢懒惰了，还是要坚持下来啊
废话不多说，进入主题
需求
现在有一个类似聚合阅读的APP里面的文章都是以WebView来显示内容
用户点击文章中的图片会进入到查看图片的页面
问题
根据Android Hybrid的想法，需要在HTML页面中提供让Android调用的js方法，但是在的HTML中并没有提供让Android调用的方法的时候该怎么实现功能。
思路
-
使用WebView的js注入，为HTML加入js函数监听
-
在Android中添加当触发HTMl中js方法的接口
实现
布局就一个webview，这里就不贴出了
MainActivity.java
public class MainActivity extends AppCompatActivity
{
private static final String URL = "http://www.jianshu.com/p/c51174efd824";
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView) findViewById(R.id.wv_test);
//获得webview的设置，并设置webview支持js
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebViewClient(new MyWebViewClient());
webView.addJavascriptInterface(new scriptInterface(MainActivity.this), "imagelistner");
webView.loadUrl(URL);
}
// WebViewClient监听
private class MyWebViewClient extends WebViewClient
{
@Override
public void onPageFinished(WebView view, String url)
{
// html加载完成之后，添加监听图片的点击js函数
addImageClickListner();
}
}
/**
* WebView与JS交互
**/
// 注入js函数监听
@android.webkit.JavascriptInterface
private void addImageClickListner()
{
// 这段js函数的功能就是，遍历所有的img标签，并添加onclick函数，在还是执行的时候调用本地接口传递url过去
webView.loadUrl("javascript:(function(){" +
"var objs = document.getElementsByTagName(\"img\"); "
+ "for(var i=0;i<objs.length;i++) " +
"{" + " " +
"objs[i].onclick=function() " + " " +
"{ "
+ " window.imagelistner.openImage(this.src); " + " " +
" } " + "}" + "})()");
}
// js通信接口
class scriptInterface
{
private Context context;
public scriptInterface(Context context)
{
this.context = context;
}
@android.webkit.JavascriptInterface
public void openImage(String img)
{
//模拟点击跳转
Toast.makeText(MainActivity.this, "点击了图片" + img,
Toast.LENGTH_SHORT).show();
}
}
}本文作者：code小生_
本文发布时间：2018年05月23日
本文来自云栖社区合作伙伴CSDN，了解相关信息可以关注csdn.net网站。
