android 捕捉webview网页中的图片点击事件

最近有要捕捉webview网页中的所有图片的点击事件，然后取到该图片的地址，点击放大或者做其他操作。

故此网上搜寻了一些方法，很多都没能成功，可能是js写法问题，今天又花时间整理了一下：

ps 注意：    

Android 4.1，API 17开始只有被@JavascriptInterface 注解标识的公有方法可以被JS代码访问。

思路：

因为网页是动态的不是本地的，如果是本地自己写的网页则很容易做到相互回调，但是此时网页是随机的动态网页，

但是有一点可以肯定 现在图片都是 <img></img>标签，此时我们可以在加载完网页之后在onPageFinished回调函数中动态给所有的 <img>标签注入onclick事件，事件按下后指向本地自定义的java 方法。

测试activity代码：

@SuppressLint("SetJavaScriptEnabled")
public class TestInputActivity extends Activity {

	WebView contentWebView;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.input);
		contentWebView = (WebView) findViewById(R.id.webView);
		// 启用javascript
		contentWebView.getSettings().setJavaScriptEnabled(true);
		// 测试带图的文的网站
		contentWebView.loadUrl("http://www.12365auto.com/news/2014-07-10/20140710115457.shtml");
		// 添加js交互接口类，并起别名 webtest
		contentWebView.addJavascriptInterface(this, "webtest");
		contentWebView.setWebViewClient(new MyWebViewClient(this));
	}

	/**
	 * 图片点击之后 webview回调的java本地方法，此时拿到了图片地址，君想干嘛就干嘛了！
	 * 方法名:jsInvokeJava
	 * @param arg
	 */

<span style="color: rgb(255, 0, 0);">        @JavascriptInterface</span>
	public void jsInvokeJava(String img) {
		Log.i("songe", "被点击的图片地址为：" + img);

	}
	
	/**
	 * 自定义webClient监听网页加载过程
	 */
	public class MyWebViewClient extends WebViewClient {

		private Context con;

		public MyWebViewClient(Context con) {
			this.con = con;
		}

		/**
		 * webview开始加载调用此方法
		 */
		@Override
		public void onPageStarted(WebView view, String url, Bitmap favicon) {
			super.onPageStarted(view, url, favicon);
			Log.i("songe", "webclient :  onPageStarted");
		}
		/**
		 * 1-webview 加载完成调用此方法;
		 * 2-查找页面中所有的<img>标签，然后动态添加onclick事件;
		 * 3-事件中回调本地java的jsInvokeJava方法;
		 * 注意：webtest别名和上面contentWebView.addJavascriptInterface(this, "webtest")别名要一致;
		 */
		@Override
		public void onPageFinished(WebView view, String url) {
			super.onPageFinished(view, url);
			Log.i("songe", "webclient : onPageFinished");
			//动态注入js
			view.loadUrl(
					"javascript:(function(){"
					+ "  var objs = document.getElementsByTagName(\"img\"); "
					+ "  for(var i=0;i<objs.length;i++){"
					+ "     objs[i].οnclick=function(){"
					+ "          window.webtest.jsInvokeJava(this.src);  "
					+ "     }" 
					+ "  }"
					+ "})()");
		}
	}

}

input.xml 布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >


    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_below="@+id/button2"/>

</RelativeLayout>