首页手记在开发中实现点击 WebView...

在开发中实现点击 WebView 中的图片，调用原生控件放大展示

标签：

Java Android

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

其实实现这种交互非常简单，就是通过 JS 调用原生控件。基本思路如下：

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

效果图

这是在线网址展示的效果图

这是本地 html 文件展示出的效果图

实现方法

html 文件

我们先写一个简单的 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);
            System.out.println(img);
        }
    }

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