如何在基于KINWebBrowser的WKWebView中从JavaScript获取返回信息

看起来你已经在搭建基于KINWebBrowserViewController的网页浏览器，并且尝试通过WKScriptMessageHandler来实现网页到原生的通信了。我来帮你补全代码并解释关键步骤：

1. 完善ViewController的配置 #

首先确保你在viewDidLoad里正确配置了WKWebViewConfiguration，并把它关联到浏览器实例：

class WebBrowserViewController: KINWebBrowserViewController, NavigationProtocol, KINWebBrowserDelegate, WKScriptMessageHandler {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 配置WKWebView的用户内容控制器，用于JS与原生通信
        let contentController = WKUserContentController()
        // 注册消息处理器，名字"callbackHandler"要和网页端的调用名完全一致
        contentController.add(self, name: "callbackHandler")
        
        let config = WKWebViewConfiguration()
        config.userContentController = contentController
        
        // 将自定义配置赋值给KINWebBrowser的webView，替换默认配置
        self.webView = WKWebView(frame: self.view.bounds, configuration: config)
        self.webView?.navigationDelegate = self
        self.webView?.uiDelegate = self
        
        // 其他初始化逻辑（比如加载指定URL）...
    }
    
    // MARK: - WKScriptMessageHandler 核心实现
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        // 验证消息来源是否是我们注册的处理器
        if message.name == "callbackHandler" {
            // 获取网页传递的返回值，message.body支持JS的多种类型（字符串、字典、数组等）
            guard let returnValue = message.body else {
                print("未获取到网页返回值")
                return
            }
            
            // 这里根据业务需求处理拿到的值
            print("从网页获取到的值：\(returnValue)")
            
            // 如果传递的是字典，可进一步解析字段
            if let valueDict = returnValue as? [String: Any] {
                let itemId = valueDict["item_id"] as? String
                let itemContent = valueDict["item_content"] as? String
                print("解析后的ID：\(itemId ?? "")，内容：\(itemContent ?? "")")
            }
        }
    }
    
    // 页面销毁时移除消息处理器，避免内存泄漏
    deinit {
        self.webView?.configuration.userContentController.removeScriptMessageHandler(forName: "callbackHandler")
    }
    
    // 按需实现KINWebBrowserDelegate的其他方法...
}

2. 网页端配合的JS代码 #

要让原生能拿到生成的值，网页端需要在值生成后调用我们注册的callbackHandler，示例JS代码如下：

// 假设网页端生成了目标值
let generatedData = {
    item_id: "web_202405",
    item_content: "这是网页端生成的内容"
};

// 调用原生注册的消息处理器，传递生成的值
window.webkit.messageHandlers.callbackHandler.postMessage(generatedData);

关键注意事项 #

• 原生注册的处理器名称（callbackHandler）必须和JS调用的名称完全一致，大小写敏感。
• message.body的类型要和JS传递的类型对应，Swift中可根据实际场景转成String、[String:Any]、[Any]等。
• 若KINWebBrowserViewController有默认的webView初始化逻辑，要确保我们的自定义配置被正确应用，避免被默认配置覆盖。

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