WebView注入Js代码实现大图自适应屏幕点击图片预览详情

开题：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页上的图片添加了点击事件，并且在原生上监听到点击事件之后添加了点击查看图片详情的逻辑操作。

WebView注入Js代码实现大图自适应屏幕点击图片预览详情

猜你喜欢