Android WebView的兩點技巧-資源攔截與js注入

1.前言

WebView是個很常用的控件，但是缺不是那麼簡單，那麼，今天來給大家介紹下最近在做的時候，遇見的幾個問題。注意，並不是所有的情況下，webview加載的都是自適應的網頁。比如說，加載<p></p><img></img> 。

2.資源攔截問題

問題描述 網頁的某些資源在手機上不合適，比如說css資源過於龐大，客戶端加載太慢，比如說，你的這個css放在客戶端不合適，等等。

那麼，我們怎麼解決呢？

解決辦法 重寫webviewclient，重寫shouldInterceptRequest方法，攔截資源並替換。

demo代碼如下：

3. js注入問題

問題描述 你這有個bug，你這裏的這個圖片怎麼這麼大呢？能不能調整一下。

好，讓咱調整圖片尺寸了，怎辦。不慌。

解決辦法 重寫webviewclient的onPageFinished方法，在這裏注入我們的js。

注入代碼如下。

webView.loadUrl("javascript:" + jsContent);

來兩個實際的例子嘗一嘗。

3.1 調整img的尺寸

    private static String imgResize = "\tfor (var i = 0;i <document.images.length;i++){\n" +
            "\t\tmImg = document.images[i];\n" +
            "\t\tvar screenWidth = " + UserAgent.getInstance().width + ";\n" +
            "\t\tif (mImg != screenWidth) {\n" +
            "\t\t\tmImg.width = screenWidth;\n" +
            "\t\t};\n" +
            "\t}";

額，上面就是調整所有的圖片到屏幕寬度。

3.2 給image添加click事件，

有時候，我們要點擊網頁中的圖片，然後跳轉到大圖界面，進行其他操作，怎麼辦呢。我們利用jsbridge，我這裏用的是這個jsbridge 。

對應的js代碼：

    private static String imgClick = "for(i=0;i<document.images.length;i++) {\n" +
            "\t(function(i){\n" +
            "\t\tdocument.images[i].onclick = function() {\n" +
            "\t\t\twindow.WebViewJavascriptBridge.callHandler('bigImageAction', {'index' : i}, function(response) {});\n" +
            "\t\t}\n" +
            "\t})(i);\n" +
            "}\n";

對應的android代碼。

        webView.registerHandler("bigImageAction", new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                try {
                    JSONObject jsonObject = new JSONObject(data);
                    int index = jsonObject.getInt("index");
                    gotoLargeImg(index);
                } catch (JSONException e) {
                    e.printStackTrace();
                }
            }
        });

4.總結

今天就簡單的介紹這兩個，webview還是有很多地方等着我們去學習。～國慶快樂。