Swift 5实现嵌入WKWebView事件触发后与iOS App交互的方法

一、URL 拦截监听注册完成状态 #

你提到的监听thankyou页面跳转的方案可直接实现，核心是通过WKNavigationDelegate拦截页面跳转请求，匹配到目标路径后触发原生逻辑，代码实现如下：

1. 给对应控制器遵守WKNavigationDelegate协议，初始化WKWebView时绑定代理

class RegisterWebViewController: UIViewController, WKNavigationDelegate {
    private var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        webView.navigationDelegate = self
        // 其余webView初始化、加载注册页逻辑省略
    }
}

2. 实现导航拦截代理方法，匹配注册完成路径

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
    guard let targetURL = navigationAction.request.url else {
        decisionHandler(.allow)
        return
    }
    // 匹配注册成功页路径，可根据你站点实际的thankyou页路由调整匹配规则
    if targetURL.absoluteString.contains("/register/thankyou") {
        // 不需要加载thankyou页就传.cancel，需要展示给用户就传.allow
        decisionHandler(.cancel)
        // 触发注册成功原生逻辑
        handleRegisterSuccess(userInfo: nil)
        return
    }
    decisionHandler(.allow)
}

3. 注册成功统一处理逻辑

private func handleRegisterSuccess(userInfo: [String: Any]?) {
    // 弹出成功提示
    let alert = UIAlertController(title: "注册成功", message: nil, preferredStyle: .alert)
    alert.addAction(UIAlertAction(title: "确定", style: .default, handler: { [weak self] _ in
        guard let self = self else { return }
        // 关闭当前popover弹窗
        self.dismiss(animated: true, completion: {
            // 通知登录页刷新状态、自动填充账号等，可根据你的架构用闭包、代理、通知传值
            NotificationCenter.default.post(name: NSNotification.Name("RegisterCompleted"), object: userInfo)
        })
    }))
    present(alert, animated: true)
}

二、JS 桥接实现网页向App传自定义参数 #

如果需要传递注册用户ID、账号等自定义参数，或者站点是单页应用无明确URL跳转，用WKScriptMessageHandler实现JS与原生的桥接通信即可，不需要依赖第三方库。

1. Swift端配置 #

第一步，初始化WKWebView时注册消息监听，和网页端约定统一的消息通道名称：

override func viewDidLoad() {
    super.viewDidLoad()
    let config = WKWebViewConfiguration()
    // 注册桥接通道，名称和网页端保持一致即可，这里示例用nativeBridge
    config.userContentController.add(self, name: "nativeBridge")
    webView = WKWebView(frame: view.bounds, configuration: config)
    webView.navigationDelegate = self
    view.addSubview(webView)
    // 加载注册页逻辑省略
}

第二步，遵守WKScriptMessageHandler协议，实现消息接收方法：

extension RegisterWebViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        guard message.name == "nativeBridge",
              let params = message.body as? [String: Any],
              let eventType = params["type"] as? String else {
            return
        }
        // 根据事件类型做对应处理
        switch eventType {
        case "registerSuccess":
            // 取出网页传递的自定义参数
            let userID = params["user_id"] as? Int ?? 0
            let account = params["account"] as? String ?? ""
            handleRegisterSuccess(userInfo: ["user_id": userID, "account": account])
        default:
            break
        }
    }
}

第三步，页面销毁时移除监听，避免内存泄漏：

deinit {
    webView.configuration.userContentController.removeScriptMessageHandler(forName: "nativeBridge")
}

2. 网页端JS代码 #

在站点注册成功的逻辑节点，直接调用系统注入的JS方法发消息即可，支持所有JSON兼容的参数类型（字符串、数字、数组、字典）：

// 注册流程走完后调用
window.webkit.messageHandlers.nativeBridge.postMessage({
    type: 'registerSuccess',
    user_id: 10086,
    account: 'test@example.com',
    register_channel: 'app_popover'
})

选型参考 #

• 仅需要判断注册完成状态、无参数传递需求时，用URL拦截方案即可，网页端无需任何修改
• 需要传自定义参数、或者站点是无刷新的单页应用时，优先选JS桥接方案，灵活度更高

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