如何在WebView中拦截图片点击并跳转至自定义ImageView Fragment

核心思路 #

通过注入JavaScript给页面所有图片绑定点击事件，拦截点击后将图片URL传递给Android原生代码，再跳转至你已有的ImageView Fragment。

具体实现步骤 #

1. 配置WebView基础参数
   初始化WebView时开启JavaScript支持，设置WebViewClient避免跳外部浏览器，并添加JS与原生交互的接口：

   webView.getSettings().setJavaScriptEnabled(true);
   // 注册JS调用原生的接口
   webView.addJavascriptInterface(new ImageClickBridge(), "ImageClickHandler");
   // 强制WebView内部处理链接，不唤起外部浏览器
   webView.setWebViewClient(new WebViewClient() {
       @Override
       public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
           return false;
       }
   });
   

2. 实现JS交互桥接类
   定义类提供原生方法供JS调用，必须添加@JavascriptInterface注解：

   public class ImageClickBridge {
       @JavascriptInterface
       public void openImage(String imgUrl) {
           // 拿到图片URL后，跳转至你的ImageView Fragment
           if (imgUrl != null && !imgUrl.isEmpty()) {
               ImageViewFragment fragment = ImageViewFragment.newInstance(imgUrl);
               getSupportFragmentManager()
                   .beginTransaction()
                   .replace(R.id.fragment_container, fragment)
                   .addToBackStack(null)
                   .commit();
           }
       }
   }
   

3. 注入JS绑定图片点击事件
   在页面加载完成后，注入JS代码给所有<img>标签添加点击拦截：

   webView.setWebViewClient(new WebViewClient() {
       @Override
       public void onPageFinished(WebView view, String url) {
           super.onPageFinished(view, url);
           // 注入JS遍历所有图片，绑定点击事件
           String jsInjectCode = "var allImgs = document.getElementsByTagName('img'); " +
                                 "for(var i=0; i<allImgs.length; i++) { " +
                                 "    allImgs[i].onclick = function() { " +
                                 "        window.ImageClickHandler.openImage(this.src); " +
                                 "        return false; // 阻止默认的图片放大行为 " +
                                 "    } " +
                                 "}";
           webView.loadUrl("javascript:" + jsInjectCode);
       }
   });
   

4. 处理URL兼容问题

   • 若图片是相对路径，可在openImage方法中拼接当前页面的Base URL：

     if (!imgUrl.startsWith("http")) {
         String baseUrl = webView.getUrl();
         imgUrl = baseUrl.substring(0, baseUrl.lastIndexOf("/") + 1) + imgUrl;
     }
     

   • 注意处理URL编码问题，避免乱码导致图片加载失败。

关键注意点 #

• Android 4.2及以上必须使用@JavascriptInterface注解，否则JS无法调用原生方法。
• 若页面存在动态加载的图片（如滚动加载），需要在内容更新后重新注入JS代码。

内容的提问来源于stack exchange，提问作者SmirnovDV