用户点击WKWebView嵌入的Iframe视频时如何获取视频相关信息

1. 初始化WKWebView时配置JS交互能力 #

初始化阶段开启JavaScript支持，同时注册原生消息接收通道，代码如下：

import WebKit

class ViewController: UIViewController {
    var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        let config = WKWebViewConfiguration()
        // 开启JavaScript支持
        config.preferences.javaScriptEnabled = true
        // 注册JS向原生传值的通道
        config.userContentController.add(self, name: "videoInfoReceiver")
        webView = WKWebView(frame: view.bounds, configuration: config)
        webView.navigationDelegate = self
        view.addSubview(webView)
        // 加载目标博客页面
        if let url = URL(string: "你的博客页面地址") {
            webView.load(URLRequest(url: url))
        }
    }
}

2. 页面加载完成后注入事件监听脚本 #

在WKWebView页面加载完成的代理回调中，注入JS脚本，用于捕获iframe内的视频点击事件并提取相关信息：

extension ViewController: WKNavigationDelegate {
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        let injectJS = """
        // 遍历页面内所有iframe节点
        document.querySelectorAll('iframe').forEach(iframe => {
            // 等待iframe自身内容加载完成
            iframe.onload = () => {
                // 绑定iframe内容区域的点击事件
                iframe.contentDocument.addEventListener('click', () => {
                    const videoNode = iframe.contentDocument.querySelector('video');
                    if (videoNode) {
                        // 组装视频信息
                        const videoInfo = {
                            title: iframe.contentDocument.title || document.title,
                            duration: videoNode.duration,
                            videoSrc: videoNode.currentSrc,
                            width: videoNode.videoWidth,
                            height: videoNode.videoHeight,
                            currentPlayTime: videoNode.currentTime
                        };
                        // 将信息回传给原生层
                        window.webkit.messageHandlers.videoInfoReceiver.postMessage(videoInfo);
                    }
                });
            };
        });
        """
        // 执行JS注入
        webView.evaluateJavaScript(injectJS)
    }
}

3. 原生层接收视频信息 #

实现WKScriptMessageHandler协议，处理JS回传的视频数据：

extension ViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        guard message.name == "videoInfoReceiver",
              let info = message.body as? [String: Any] else { return }
        // 直接使用获取到的视频信息
        let title = info["title"] as? String ?? "无标题"
        let duration = info["duration"] as? Double ?? 0
        print("视频标题：\(title)，总时长：\(duration)秒")
    }
}

注意：如果iframe嵌入的是第三方平台的视频，需要第三方域名没有设置跨域限制，否则JS无法访问iframe内部DOM节点，也就无法提取视频信息。

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