使用js实现WebView中图片点击查看

Dear 丶 2023-07-01 06:24 78阅读 0赞

webview 加载的网页中有图片展示，要求实现点击图片放大查看的功能。
图片展示放在Android端处理，图片RUL的获取需要通过网页调用js代码实现。
html和Android交互，可看Android 和 HTML 页面交互

1.新建图片展示页面`WebPicturesActivity`

public class WebPicturesActivity extends AppCompatActivity { 
    private String currentURL;
    private String[] urls;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_webpicture);//只有一个photoview控件
        Intent intent = getIntent();
        if (intent != null) { 
            currentURL = intent.getStringExtra("curImg");
            urls = intent.getStringArrayExtra("imageUrls");
            //用三方图片展示控件 implementation 'com.bm.photoview:library:1.4.1'
            PhotoView photoView = findViewById(R.id.pv);
            photoView.enable();
            photoView.setScaleType(ImageView.ScaleType.FIT_CENTER);
            //Glide的版本是3.7.0，如果使用4.0以上要配置AppGlideModule
            //只实现了单个展示，可用viewpager展示图片url列表
            Glide.with(WebPicturesActivity.this)
                    .load(currentURL)
                    .override(Target.SIZE_ORIGINAL, Target.SIZE_ORIGINAL)
                    .fitCenter()
                    .crossFade()
                    .into(photoView);
        }
    }
}

2.新建本地类`ImageJavascriptInterface`供js调用

public class ImageJavascriptInterface { 
    private Context context;
    private static final String TAG = "ImageJavascriptInterface";
    public ImageJavascriptInterface(Context context) { 
        this.context = context;
    }
    @JavascriptInterface //必须添加
    public void openImage(String img, String[] array) { 
        L.d(TAG, "openImage: " + img);
        for (String imgUrl : array) { 
            L.d(TAG, "openImage: " + imgUrl);
        }
        Intent intent = new Intent(context, WebPicturesActivity.class);
        intent.putExtra("imageUrls", array);
        intent.putExtra("curImg", img);
        context.startActivity(intent);
    }
}

3.设置webview

要在页面加载之后添加js代码，即在onPageFinished中添加

WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);//支持js
settings.setDomStorageEnabled(true);
webView.addJavascriptInterface(new ImageJavascriptInterface(context), "imagelistener");
webView.setWebViewClient(new WebViewClient() { 
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) { 
        super.onPageStarted(view, url, favicon);
    }
    @Override
    public void onPageFinished(WebView view, String url) { 
        super.onPageFinished(view, url);
        addImageClickJS(view);//页面加载完后设置图片监听事件
    }
});
webView.loadDataWithBaseURL(null, url, "text/html", "UTF-8", null);

addImageClickListener方法：
获取页面所有img标签，添加点击事件，调用Android的openImage方法，将点击的图片URL传出去

//设置webview图片的监听事件
private void addImageClickListener(WebView webView) { 
    webView.loadUrl("javascript:(function(){" +
            "var objs = document.getElementsByTagName('img'); " +
            "var array=new Array(); " +
            "for(var j=0;j<objs.length;j++)" +
            "{" +
            " array[j]=objs[j].src;" +
            "}" +
            "for(var i=0;i<objs.length;i++) " +
            "{" +
            " objs[i].οnclick=function() " +
            " {" +
            " window.imagelistener.openImage(this.src,array); " +
            " }" +
            " }" +
            "imgTag.insertAdjacentHTML(\"beforebegin\", \"<p></p>\");" +
            "})()");
}