监听WebView页面上所有的图片

有两周没写简书了,有一丢丢懒惰了,还是要坚持下来啊

废话不多说,进入主题

需求

现在有一个类似聚合阅读的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.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="" void="" openimage(string="" img)="" 模拟点击跳转="" toast.maketext(mainactivity.this,="" "点击了图片"="" img,="" toast.length_short).show();="" } 
 

效果

demo

简书责编内容来自:简书 (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 移动开发 » 监听WebView页面上所有的图片

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录