在開發中實現點擊 WebView 中的圖片，調用原生控件放大展現

時間 2019-11-17

標籤開發實現點擊 webview 圖片調用原生控件放大展現简体版

原文原文鏈接

如今有不少時候，咱們的 App 都進行了混合開發，而最簡單，最經常使用的就是有些網頁採用了 WebView 進行展現，這就須要咱們瞭解和懂得如何實現 WebView 和 JS 進行交互。今天咱們就來學習一下，如何點擊 WebView 中的網頁圖片，調用原生控件進行放大展現。javascript

其實實現這種交互很是簡單，就是經過 JS 調用原生控件。基本思路以下：html

首先加載一個 html 網頁，網址或者本地 html 文件均可以。
遍歷 html 標籤源代碼，找到全部的 img 標籤節點。
給遍歷到得 img 標籤節點加上 onClick 事件。
經過點擊加上的 onClick 事件，經過 JS 調用原生控件，展現放大便可。

效果圖

這是在線網址展現的效果圖
java

這是本地 html 文件展現出的效果圖

實現方法

html 文件

咱們先寫一個簡單的 html 文件，裏面放兩張圖片。源代碼很是簡單。代碼以下：android

<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 中。方法以下：web

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 接口，一個是監聽函數的名字。ide

遍歷 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 之間實現通訊了。