WKScriptMessageHandler 不会侦听网页上按钮元素上的“onclick”或“click”事件。网页是使用Reactjs开发的

我正在使用一个WKWebView在 UIViewController 的视图中使用 url 端点显示托管在服务器上的网页。该网页使用Reactjs。这就是我所掌握的有关该网页的所有信息。该代码创建一个 Web 视图并将该 Web 视图作为控制器视图的子视图插入。

let requestObj = URL(string:urlString)!
let preferences = WKPreferences()
preferences.javaScriptEnabled = true
let configuration = WKWebViewConfiguration()
configuration.preferences = preferences
webViewWK = WKWebView(frame: .zero, configuration: configuration)
webViewWK.navigationDelegate = self
_ = webViewWK.load(requestObj)
webViewwrapper = WKWebViewWrapper(forWebView: webViewWK)

网页加载良好，控制器充当 webview 的代表并接收相同的消息。现在我还实现了一个符合 WKScriptMessageHandler 的 WKWebViewWrapper 类。然后，该类可以从场景中的 WKWebView 创建的 webkit 对象接收消息。其实现如下

class WKWebViewWrapper : NSObject, WKScriptMessageHandler{

var wkWebView : WKWebView
let eventNames = ["buttonClick"]
var eventFunctions: Dictionary<String, (String) -> Void> = [:]
let controller: WKUserContentController

init(forWebView webView : WKWebView){
    wkWebView = webView
    controller = WKUserContentController()
    super.init()
}

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    if let contentBody = message.body as? String {
        if let eventFunction = eventFunctions[message.name]{
            print("Detected javascript event")
        }
    }
}

func setUpPlayerAndEventDelegation(){
    wkWebView.configuration.userContentController = controller
    for eventname in eventNames {
        controller.add(self, name: eventname)
        eventFunctions[eventname] = { _ in }

        wkWebView.evaluateJavaScript("var elements = document.getElementsByClassName('btn button_btn button_primary button_md button_block'); for (var i = 0 ; i < elements.length; i++) { elements[i].addEventListener('onClick', function(){ window.webkit.messageHandlers.\(eventname).postMessage(JSON.stringify(isSuccess)) }); }") { any, error in
            if let error = error {
                print("EvaluateJavaScript Error:",error)
            }

            if let any = any {
                print("EvaluateJavaScript anything:", any)
            }

        }
    }
}

}

The setUpPlayerAndEventDelegation()方法是最重要的部分。这里是类型为的控制器对象WK用户内容控制器使用其 add(: , 名称:) 方法。根据文档，此方法将 name 参数的 messageHandler 添加到 webkit 对象。每当消息处理程序被触发时，WKScriptMessageHandler 的 userContentController(userContentController：WKUserContentController，didReceive消息：WKScriptMessage）方法

注意一个重要的行为（但鲜为人知）WKWebViewConfiguration in 苹果文档 https://developer.apple.com/documentation/webkit/wkwebviewconfiguration,

WKWebViewConfiguration 仅在首次初始化 Web 视图时使用。创建 Web 视图后，您不能使用此类来更改其配置。

因此，这通常是您应该设置的WKUserContentController完全在 Web 视图创建之前。

// First, create custom configuration with user script
let userController = WKUserContentController()
let scalingScriptString = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
let scalingScript = WKUserScript(source: scalingScriptString, injectionTime: .atDocumentStart, forMainFrameOnly: true)
userController.addUserScript(scalingScript)

let configurations = WKWebViewConfiguration()
configurations.userContentController = userController  // MUST set controller in configurations before creating webview
// Now, use that configuration to create the webview
webView = WKWebView(frame: .zero, configuration: configurations)