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

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

webview 加载的网页中有图片展示，要求实现点击图片放大查看的功能。  
图片展示放在`Android端`处理，图片RUL的获取需要通过`网页调用js`代码实现。  
html和Android交互，可看[Android 和 HTML 页面交互][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>\");" +
                "})()");
    }

[Android _ HTML]: https://blog.csdn.net/qq_28356833/article/details/104040267