Android使用WebView实现图片点击的监听

Android使用WebView实现图片点击的监听

话不多说，直接进入主题。

第一步

首先我们需要写一个监听事件的java类，如下：

	/**
     * 图片的点击事件调用的方法
     */
    class ImageInterface {
        @JavascriptInterface
        public void onImageClick(String imgUrl) {
            Toast.makeText(MainActivity.this, imgUrl, Toast.LENGTH_LONG).show();
        }
    }

第二步

这里需要对webview做一定的设置和处理：

private WebView mWebView;
private WebSettings mWebSettings;

mWebView = (WebView) findViewById(R.id.wv);
//获得webview的setting
mWebSettings = mWebView.getSettings();
//设置对js的支持
mWebSettings.setJavaScriptEnabled(true);
//加载webview的内容
mWebView.loadData(html+js,"text/html","utf-8");
//最关键的方法，添加一个js的接口，第一个参数为对象，第二个可以理解为对象的名字，后面在js中可以直接使用这个去调用方法
mWebView.addJavascriptInterface(new ImageInterface(), "wv");

第三步

要实现网页的内容能够被安卓监听到，那么我们要把第二步设置的接口在js里面表明：

private String js = "<style>img{max-width:100%;height:auto;} p{line-height:150%;}</style><script>var imgs=document.getElementsByTagName('img');for(var i=0;i<imgs.length;i++){imgs[i].onclick=function(){wv.onImageClick('click');alert('123');};}</script>";
    private String html = "<img src='http://resonlei.top/photo/c.jpg'></img>";

注意到上面的script里面，我获取了所有的img标签，并且为所有的img标签都设置了一个点击事件，

<script>
	var imgs=document.getElementsByTagName('img');
	for(var i=0;i<imgs.length;i++){
	
		imgs[i].onclick=function(){
			wv.onImageClick('click');//这里就是代码的关键，表示调用java代码的这个方法
		};
	}
</script>

结语

好了，一共就是三个简单的步骤，就可以实现对于webview内容的监听，其他的监听也可以通过类似的方法去实现，不再赘述。这种方法就跟java里面的回调机制是一个思路，只不过一部分编程了其他的内容，不要忘记在java的方法中添加@JavascriptInterface 标记哦!