实现点击 WebView 中的图片，调用原生控件显示图片

实现点击 WebView 中的图片，调用原生控件展示图片
现在有很多时候，我们的 App 都进行了混合开发，而最简单，最常用的就是有些网页采用了 WebView 进行展示，这就需要我们了解和懂得如何实现 WebView 和 JS 进行交互。今天我们就来学习一下，如何点击 WebView 中的网页图片，调用原生控件进行放大展示。
其实实现这种交互非常简单，就是通过 JS 调用原生控件。基本思路如下：

1，首先加载一个 html 网页，网址或者本地 html 文件都可以。
2，遍历 html 标签源代码，找到所有的 img 标签节点。
3，给遍历到得 img 标签节点加上 onClick 事件。
4，通过点击加上的 onClick 事件，通过 JS 调用原生控件，展示放大即可。

实现方法
我们先写一个简单的 html 文件，里面放两张图片。源代码非常简单。代码如下：

<html>
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    </head>
    <body>
    <h1>显示图片</h1>
    <img src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490585759664&di=56aa55f480140643a11c134ef8bdae07&imgtype=0&src=http%3A%2F%2Fi2.sanwen8.cn%2Fdoc%2F1610%2F704-161024211H3.jpg' style='vertical-align:middle;' />
    <h1>第二张图片</h1>
    <img src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490585932299&di=9ab54209dc8672cdd45b817ba3b09000&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fbaike%2Fpic%2Fitem%2F5fdf8db1cb134954a4d833a0534e9258d0094a34.jpg' />
    </body>
<html>

写的这个本地的 html 文件，放到 main/assets 目录下即可。

设置 WebView

这一步就是将我们写的 html 本地文件放入到 WebView 中。方法如下：

 mWebView = (WebView) findViewById(R.id.webview);
        WebSettings webSettings = mWebView.getSettings();
        // 设置与Js交互的权限
        webSettings.setJavaScriptEnabled(true);
        // 设置允许JS弹窗
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        //防止中文乱码
        mWebView.getSettings().setDefaultTextEncodingName("UTF-8");
        // 先载入JS代码
        // 格式规定为:file:///android_asset/文件名.html
//        mWebView.loadUrl("file:///android_asset/image.html");
        mWebView.loadUrl("http://www.toutiao.com/a6401738581286682881/#p=1");
        //载入js
        mWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");

关键的代码是：

mWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");

这行代码就是 WebView 与 JavaScript 交互的关键。上面两个参数，一个是 JS 接口，一个是监听函数的名字。

遍历 img 节点，加入监听

 mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                //这段js函数的功能就是注册监听，遍历所有的img标签，并添加onClick函数，函数的功能是在图片点击的时候调用本地java接口并传递url过去
                mWebView.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);  "
                        + "    }  " + "}" + "})()");
            }
        });
    }

这里有行代码注意一下：

window.imagelistner.openImage(this.src);

这里就是给每个 img 节点加入点击事件，注意看这个imagelistenr其实就是 mWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner") 定义的方法名，而 openImage 就是我们自定义的 JavaScriptInterface 中的 openImage 方法。

通过 JS 接口，调用原生控件

// js通信接口
    public class JavascriptInterface {

        private Context context;


        public JavascriptInterface(Context context) {
            this.context = context;
        }

        @android.webkit.JavascriptInterface
        public void openImage(String img) {
            Intent intent = new Intent();
            intent.putExtra("img", img);
            intent.setClass(context, ImageActivity.class);
            context.startActivity(intent);
        }
    }

这里的 JavascriptInterface 就是和 mWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner") 中的 new JavascriptInterface(this) 对应的。这样我们就通过 JavascriptInterface 就把 JS 和 WebView 之间实现通信了。

实现点击 WebView 中的图片，调用原生控件显示图片

相关推荐