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

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

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


ps 注意:    

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


思路:

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

但是有一点可以肯定 现在图片都是 标签,此时我们可以在加载完网页之后在onPageFinished回调函数中动态给所有的 标签注入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
	 */
        @JavascriptInterface
	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-查找页面中所有的标签,然后动态添加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


 input.xml 布局文件 
  




    



你可能感兴趣的:(HTML5,android)