如何在WKWebView中拦截网页按钮事件并替换为原生自定义动作？

嘿，这个需求其实很常见，通过注入JS脚本+WKWebView的原生消息通信机制就能完美实现，我给你拆解下具体的实现步骤，都是实战中验证过的方案：

通过注入自定义JS脚本，拦截网页按钮的点击事件，阻断其原有默认行为，再通过WKWebView的webkit.messageHandlers向原生发送消息，原生收到消息后执行自定义动作。

第一步：编写注入的JS脚本，拦截按钮点击 #

根据网页按钮的选择方式（ID、Class、标签等），编写对应的拦截脚本：

场景1：单个固定按钮（比如ID为target-btn的按钮） #

// 找到目标按钮
const targetBtn = document.getElementById('target-btn');
if (targetBtn) {
  // 绑定点击事件，先阻断原有动作
  targetBtn.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认跳转/提交等动作
    e.stopPropagation(); // 阻止事件冒泡（可选，根据需求决定）
    // 向原生发送消息，传递必要参数（比如按钮标识、动作类型）
    window.webkit.messageHandlers.btnActionTrigger.postMessage({
      btnId: this.id,
      actionType: 'customNativeAction'
    });
  });
}

场景2：多个同类型按钮（比如Class为action-btn的按钮） #

// 批量绑定事件
function bindBtnClick() {
  document.querySelectorAll('.action-btn').forEach(btn => {
    // 先移除旧监听，避免重复绑定
    btn.removeEventListener('click', handleBtnClick);
    btn.addEventListener('click', handleBtnClick);
  });
}

// 点击处理逻辑
function handleBtnClick(e) {
  e.preventDefault();
  e.stopPropagation();
  // 向原生发送消息，可携带按钮的文本/ID等信息
  window.webkit.messageHandlers.btnActionTrigger.postMessage({
    btnText: this.textContent.trim(),
    btnId: this.id
  });
}

// 初始绑定
bindBtnClick();

场景3：动态加载的按钮（比如Ajax渲染的内容） #

如果按钮是页面加载后动态生成的，需要用MutationObserver监听DOM变化，自动绑定事件：

// 监听DOM变化
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(mutation => {
    if (mutation.addedNodes.length > 0) {
      // 新增节点后重新绑定按钮事件
      bindBtnClick();
    }
  });
});

// 监听body的子节点变化（包含子树）
observer.observe(document.body, { childList: true, subtree: true });

// 复用上面的bindBtnClick和handleBtnClick函数
function bindBtnClick() { /* ... */ }
function handleBtnClick(e) { /* ... */ }

第二步：原生代码配置WKWebView，接收JS消息 #

1. 初始化WKWebView时配置消息处理器 #

import WebKit

class ViewController: UIViewController {
    private var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 创建配置对象
        let config = WKWebViewConfiguration()
        let userContentController = WKUserContentController()
        
        // 添加消息处理器，name要和JS里的`btnActionTrigger`完全一致
        userContentController.add(self, name: "btnActionTrigger")
        config.userContentController = userContentController
        
        // 初始化WKWebView
        webView = WKWebView(frame: view.bounds, configuration: config)
        webView.navigationDelegate = self
        view.addSubview(webView)
        
        // 加载目标网页
        if let url = URL(string: "https://your-target-url.com") {
            webView.load(URLRequest(url: url))
        }
    }
}

2. 实现WKScriptMessageHandler协议，处理JS消息 #

extension ViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        // 判断是否是我们需要的消息
        guard message.name == "btnActionTrigger",
              let messageBody = message.body as? [String: Any] else {
            return
        }
        
        // 这里执行你的原生自定义动作
        print("收到网页按钮消息：\(messageBody)")
        
        // 示例：弹出原生弹窗
        let alert = UIAlertController(title: "原生动作触发", message: "按钮ID：\(messageBody["btnId"] ?? "未知")", preferredStyle: .alert)
        alert.addAction(UIAlertAction(title: "确定", style: .default))
        present(alert, animated: true)
        
        // 也可以跳转原生页面、调用原生组件等
        // let nativeVC = NativeDetailViewController()
        // navigationController?.pushViewController(nativeVC, animated: true)
    }
}

3. 在网页加载完成后注入JS脚本 #

通过WKNavigationDelegate的didFinish方法，确保网页加载完成后再注入脚本：

extension ViewController: WKNavigationDelegate {
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        // 读取JS脚本（也可以直接写字符串，或者从本地文件读取）
        let jsScript = """
        // 这里粘贴你上面写的JS代码
        const targetBtn = document.getElementById('target-btn');
        if (targetBtn) {
          targetBtn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            window.webkit.messageHandlers.btnActionTrigger.postMessage({btnId: this.id});
          });
        }
        """
        
        // 注入并执行脚本
        webView.evaluateJavaScript(jsScript) { result, error in
            if let error = error {
                print("JS注入失败：\(error.localizedDescription)")
            } else {
                print("JS注入成功，已拦截按钮事件")
            }
        }
    }
}

注意事项 #

• 确保JS中webkit.messageHandlers的名称和原生add(self, name:)的名称完全一致，否则消息无法传递。
• 如果网页存在跨域限制，需要在WKWebView的配置中做相应设置，或者确保网页允许和原生交互。
• 动态绑定事件时，记得移除旧的监听，避免重复触发。

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