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);

• 1

来两个实际的例子尝一尝。

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}";

• 1
• 2
• 3
• 4
• 5
• 6
• 7

额，上面就是调整所有的图片到屏幕宽度。

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";

• 1
• 2
• 3
• 4
• 5
• 6
• 7

对应的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还是有很多地方等着我们去学习。