Android WebView图片查看

1、在WebViewClient的onPageFinished里面调用如下方法

private void addImageClickListener(WebView webView) {
        webView.loadUrl("javascript:(function(){" +
                "var objs = document.getElementsByTagName(\"img\"); " +
                "var imgsxx = new Array(objs.length);" +
                "for(var i=0;i<objs.length;i++)  " +
                "{"
                + "    imgsxx[i]=objs[i].src;"
                + "     var position=i;"
                + "    objs[i].οnclick=function()  " +
                "    {  "
                + "        window.imageListener.open(imgsxx,this.src);  " +//通过js代码找到标签为img的代码块，设置点击的监听方法与本地的openImage方法进行连接
                "    }  " +
                "}" +
                "})()");
    }

或用下面的JS，

function androidImg(){
            var objs = document.getElementsByTagName('img');
            var imgs = [];
            for (var i = 0; i < objs.length; i ++) {
                imgs.push(objs[i].src);
            }
            function test(i, imgs, position){
                objs[i].onclick = function(){
                    // window.imageListener = {};
                    alert(position)
                    window.imageListener.open(imgs, position);
                }
            }
            for (var i = 0; i < objs.length; i ++) {
                test(i, imgs, i);
            }
        }

2、定义JS交互接口MJavascriptInterface

public class MJavascriptInterface {

    private Activity mActivity;

    public MJavascriptInterface(Activity activity) {
        mActivity = activity;
    }


    /**
     *
     * @param imgs
     * @param img
     */
    @android.webkit.JavascriptInterface
    public void open(final String[] imgs, final String img) {

    }

	@android.webkit.JavascriptInterface
    public void open(final String[] imgs, final int index) {
       
    }

}

3、WebView设置

WebSettings webSettings = getSettings();
        webSettings.setUserAgentString(webSettings.getUserAgentString());
        webSettings.setJavaScriptEnabled(true); // 设置webview支持JavaScript
        addJavascriptInterface(new MJavascriptInterface((Activity) getContext()), "imageListener");
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

4、注意

如果是服务端返回html中包含JS代码，则注意JS中不要有注释，感觉像是部分手机会把html和JS压缩成一行，这样注释就会把正常代码也注释掉。oppo、vivo和华为部分手机。

如下面带注释的代码可能会出现问题：

<script type="text/javascript">
function androidImg(){
		var objs = document.getElementsByTagName('img');
		var imgs = [];
		for (var i = 0; i < objs.length; i ++) {
		imgs.push(objs[i].src);
		}
		function imgClick(imgs, position){
			objs[position].onclick = function(){
					window.imageListener.open(imgs, position);
			}
		}
		for (var i = 0; i < objs.length; i ++) {
			imgClick(imgs, i);
		}
}

// 安卓或者ios
androidImg();</script>