「iOS & Android」WebView获取图片、点击图片_ios 获取wkwebview图片-CSDN博客

本文链接：https://blog.csdn.net/zWbKingGo/article/details/109643294

本文介绍了如何在iOS的WKWebView和Android的webView中处理图片获取和点击事件。通过注入JavaScript代码，捕获img标签以获取图片URL，并实现图片的点击交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取思路：

注入JS代码获取 ‘img’ 图片，拼接成字符串返回，然后分割字符串得到每个图片的url
注入JS代码获取图片的点击事件

iOS

iOS使用WKWebView

// MARK:- WKNavigationDelegate
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {

	// 注入JS代码获取图片url和个数
	self.webView.evaluateJavaScript("""
         function getImages(){\
                         var imgs = document.getElementsByTagName('img');\
                         var imgScr = '';\
                         for(var i=0;i<imgs.length;i++){\
                             if (i == 0){ \
                                imgScr = imgs[i].src; \
                             } else {\
                                imgScr = imgScr +'***'+ imgs[i].src;\
                             } \
                         };\
                         return imgScr;\
                     };
 """, completionHandler: nil)

	self.webView.evaluateJavaScript("getImages()") { [weak self] (result, error) in
            guard error == nil else {
                return
            }
            
            guard let resultString: String = result as? String else {
                return
            }
            
            // 分割字符串, 放入数组中
            for (_, num) in resultString.components(separatedBy: "***").enumerated() {
                self?.imageItemArray.append(num)
            }
            
            print("一共有\((self?.imageItemArray.count)!)张图片")
        }

		//添加图片点击的回调
        self.webView.evaluateJavaScript("""
                        function registerImageClickAction(){\
                             var imgs = document.getElementsByTagName('img');\
                             for(var i=0;i<imgs.length;i++){\
                                 imgs[i].customIndex = i;\
                                 imgs[i].onclick=function(){\
                                    window.location.href='image-preview-index:'+this.customIndex;\
                                 }\
                             }\
                         }
            """, completionHandler: nil)
           
        self.webView.evaluateJavaScript("registerImageClickAction();", completionHandler: nil)
}


func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {

	// 点击图片
	let url = navigationAction.request.url
            if url?.scheme == "image-preview-index" {
                //图片点击回调
                let index = Int((url!.absoluteString as NSString).substring(from: "image-preview-index:".count)) ?? 0
                print("点击图片 INDEX = \(index)")
                print("点击图片 IMAGEPATH = " + url!.absoluteString)
                
                decisionHandler(.cancel)
            } else {
                decisionHandler(.allow)
            }
}

Android

Android 使用自带webView

// webView页面加载完成后
wbWebview.setWebViewClient(new WebViewClient() {

	@Override
	public void onPageFinished(WebView view, String url) {
		super.onPageFinished(view, url);
        
		getWebViewImage();
		setWebImageClick(view);
	}

	// 获取图片
	private void getWebViewImage() {

		String jsString = "function getImages() {\n" +
                        "\tvar imgs = document.getElementsByTagName('img');\n" +
                        "\tvar imgScr = '';\n" +
                        "\tfor (var i = 0; i < imgs.length; i++) {\n" +
                        "\t\tif (i == 0) {\n" +
                        "\t\t\timgScr = imgs[i].src;\n" +
                        "\t\t} else {\n" +
                        "\t\t\timgScr = imgScr + '---' + imgs[i].src;\n" +
                        "\t\t}\n" +
                        "\t};\n" +
                        "\treturn imgScr;\n" +
                        "};";

		wbWebview.evaluateJavascript(jsString, null);

		wbWebview.evaluateJavascript("javascript:getImages()", new ValueCallback<String>() {
				@Override
				public void onReceiveValue(String value) {
					if (value != null && !value.equals("") && !value.equals("null")) {
						value = value.replace("\"", "");
						String[] dataSource = value.split(
                                    "---");
						imageDataSource = Arrays.asList(dataSource);
						Log("已获取到图片, 总共 " + imageDataSource.size() + " 张图片");
				}
			}
		});
	}
	
	// 添加图片点击方法
	private void setWebImageClick(WebView view) {
		String jsCode = "javascript:(function(){" +
                        "var imgs=document.getElementsByTagName(\"img\");" +
                        "for(var i=0;i<imgs.length;i++){" +
                        "imgs[i].οnclick=function(){" +
                        "window.jsCallJavaObj.showBigImg(this.src);" +
                        "}}})()";
		wbWebview.loadUrl(jsCode);
	}
	
	wbWebview.addJavascriptInterface(new JsCallJavaObj() {
            @JavascriptInterface
            @Override
            public void showBigImg(String url) {
                Log("点击图片");
            }
        }, "jsCallJavaObj");

	/**
     * Js調用Java接口
     */
    private interface JsCallJavaObj {
        void showBigImg(String url);
    }
}