開題：android中webview通過url載入網頁時，如果web頁恰巧沒對手機做單獨適配的話，那我們拿到的url直接通過loadUrl的方式載入到webview上很容易出現一些適配上的問題，即使你通過websetings設定網頁自適應，也很難處理部分細節上的樣式，特別是圖片資源，部分css樣式是按照pc端的適配去做的，load到手機上很容易出現樣式問題，下面就拿網頁上適配前跟適配後的網頁中圖片的處理舉例。

無圖無真相：

上圖可以很清楚的看到，左邊是沒適配的，圖片在webview上超出了螢幕顯示，只能通過左右滑動預覽全圖，右圖為通過注入js程式碼後自適應螢幕的圖片，可以清楚的看到螢幕上圖片的寬度就是螢幕的寬度，並且通過注入js程式碼給網頁上的圖片添加了點選預覽大圖功能。

實現思路分析：

 1.上述中webvie是通過loadurl的方式載入的網頁，所以在載入網頁之前我們不可能改變html程式碼的結構跟樣式，我們從另外一個角度入手，通過webviewClient監聽網頁載入finish之後做攔截處理，然後注入相應的js程式碼，來完成我們預期的效果。

2.如果你是通過loadData的形式載入的網頁，可以採用正則來新增樣式，具體我就不細說了，該博文主要講解第一種方式，讀者可自行實現。

樣例程式碼：

1.由於需要注入js程式碼，肯定需要給webview設定支援JavaScript引用

wvCompContent.getSettings().setJavaScriptEnabled(true);
 

2.接下來我們給set上我們擴充套件自WebviewClient的ResizeImgWebViewClient，監聽網頁載入完成之後注入讓圖片自適應螢幕寬度的js程式碼

 wvCompContent.setWebViewClient(new ResizeImgWebviewClient());

public class ResizeImgWebviewClient extends WebViewClient {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        resizeImg(view);
        addImgClickEvent(view);

    }

    /**
     * 新增圖片點選事件
     *
     * @param view
     */
    private void addImgClickEvent(WebView view) {
        view.loadUrl("javascript:(function(){" +
                "var objs = document.getElementsByTagName(\"img\"); " +
                "for(var i=0;i<objs.length;i++)  " +
                "{"
                + "    objs[i].onclick=function()  " +
                "    {  "
                + "        window.JsBridge.openImage(this.src);  " +
                "    }  " +
                "}" +
                "})()");
    }

    /**
     * 重新調整圖片寬高
     *
     * @param view
     */
    private void resizeImg(WebView view) {
        view.loadUrl("javascript:(function(){" +
                "var objs = document.getElementsByTagName('img'); " +
                "for(var i=0;i<objs.length;i++)  " +
                "{"
                + "var img = objs[i];   " +
                "    img.style.maxWidth = '100%'; img.style.height = 'auto';  " +
                "}" +
                "})()");
    }

}
 

現在我們已經完成了對圖片寬高自適應螢幕的操作，讀者可能留意到上ResizeImgWebviewClient上還有一段給圖片新增點選事件的js程式碼，這裡涉及到web頁互動到原生，所以我們需要addJavaScriptInterace，把響應的JSBridge繫結進去

wvCompContent.addJavascriptInterface(new JsBridge(), "JsBridge");

3.在jsBridge中，我們攔截到web頁上對圖片的具體操作，去做響應的處理，比如你可以新啟一個Activity或者fragment然後通過glide等圖片載入工具載入從網頁上傳來的圖片的url來實現點選圖片檢視圖片詳情的操作，我貼出預覽圖片的程式碼，是我專案中封裝好的圖片預覽工具類，僅供讀者參考

public class JsBridge {
    /**
     * 響應webview上點選圖片事件（大圖預覽）
     *
     * @param url
     */
    @JavascriptInterface
    public void openImage(String url) {
        List<LocalMedia> images = new ArrayList<>();
        LocalMedia localMedia = new LocalMedia();
        localMedia.setPath(url);
        images.add(localMedia);
        MediaConfig.getInstance().picturePreview(AppManager.getInstance().currentActivity(), 0, images);
    }
}

至此整個過程就結束了，總結一下就是我們通過攔截注入js的方式，完成了對原先沒有適配到手機上的圖片做到了寬高自適應螢幕的操作，並且還通過web頁簡單的互動到原生給web頁上的圖片添加了點選事件，並且在原生上監聽到點選事件之後添加了點選檢視圖片詳情的邏輯操作。