监听WebView页面上所有的图片

code小生，一个专注于 Android 领域的技术分享平台

作者：代码打志bin
地址：https://www.jianshu.com/p/e36fa6e38ac7
声明：本文是 代码打志bin 原创，转发等请联系原作者授权。

有两周没写简书了，有一丢丢懒惰了，还是要坚持下来啊
废话不多说，进入主题

需求

现在有一个类似聚合阅读的APP里面的文章都是以WebView来显示内容
用户点击文章中的图片会进入到查看图片的页面

问题

根据Android Hybrid的想法，需要在HTML页面中提供让Android调用的js方法，但是在的HTML中并没有提供让Android调用的方法的时候该怎么实现功能。

思路

1. 使用WebView的js注入，为HTML加入js函数监听

2. 在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[i].οnclick=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();
        }
    }
}

效果

demo
https://github.com/CzSam/Democzs/tree/master/%E7%9B%91%E5%90%ACWebView%E4%B8%AD%E7%9A%84%E5%9B%BE%E7%89%87

WebView

WebView 开车指南之最全实用案例

Android 和 H5 交互-框架篇