javascript - SwiftUI:在 macOS 上与 WKWebView 的 Javasc

我希望 javascript 将消息发送回我的 WKWebView 对象,但我没有收到任何响应。我知道脚本正在运行,因为颜色会发生变化,但我希望也能在控制台中看到打印的“来自 JS 的触发器”,但我没有看到。如果我在 Chrome 中运行 html,javascript 控制台会显示“无法读取未定义的属性‘messageHandlers’”。如果我为 iOS 构建(使用 UIViewRepresentable、MakeUIView 和 UpdateUIView),结果是一样的。如果有人能发现我遗漏的内容,我将不胜感激。

这是完整的代码:

import SwiftUI
import WebKit

class HtmlData {
    let html = """
    <!DOCTYPE html>
    <html>
    <body>

    <button onclick="sendMessage()">Send Message</button>
    <script>
    function sendMessage() {
      document.body.style.backgroundColor = "red";
     window.webkit.messageHandlers.testMessage.postMessage("trigger from JS");
    }
    </script>
    </body>
    </html>
    """
}

struct ContentView: View {
    let htmlData = HtmlData()
    var body: some View {
        JSWebView(html: htmlData.html)
    }
}

struct JSWebView: NSViewRepresentable {
    let html: String
    func makeNSView(context: Context) -> WKWebView {
        let preferences = WKPreferences()
        preferences.javaScriptEnabled = true
        return WKWebView()
    }
    
    func updateNSView(_ view: WKWebView, context: Context) {
        let userContentController = WKUserContentController()
        let handler = ContentController(view)
        let configuration = WKWebViewConfiguration()
        configuration.userContentController = userContentController
        configuration.userContentController.add(handler, name: "testMessage")
        view.loadHTMLString(html, baseURL: Bundle.main.bundleURL)
    }
    
    class ContentController: NSObject, WKScriptMessageHandler {
        var parent: WKWebView?
        init(_ parent: WKWebView?) {
            self.parent = parent
        }
        func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
            print(message.body)
        }
    }
}

最佳答案

配置必须传递到 WKWebView 的构造函数中。初始化后不可设置。

struct JSWebView: NSViewRepresentable {
    let html: String
    
    func makeNSView(context: Context) -> WKWebView {
        let preferences = WKPreferences()
        preferences.javaScriptEnabled = true
        let handler = MessageHandler()
        let configuration = WKWebViewConfiguration()
        configuration.userContentController.add(handler, name: "testMessage")
        return WKWebView(frame: .zero, configuration: configuration)
    }
    
    func updateNSView(_ view: WKWebView, context: Context) {
        view.loadHTMLString(html, baseURL: Bundle.main.bundleURL)
    }
    
    class MessageHandler: NSObject, WKScriptMessageHandler {
        func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
            print(message.body)
        }
    }
}

关于javascript - SwiftUI:在 macOS 上与 WKWebView 的 Javascript 通信,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67038215/

相关文章:

c# - 使用 Newtonsoft.JSON 自定义转换器读取具有不同输入的 json

java - 如何给java.net.http.HttpClient GET请求添加参数?

reactjs - 使用vite时如何识别 typescript 中的env变量?

modbus - Minimalmodbus:在同一个串口上读取多个从机

git - 如何使用 gitlab-ci.yml 进行简单的 pull ?

python - 类型错误 : forward() takes 2 positional argum

python - VSCode 终端不显示所有行

uml - 将关联类添加到组合关系

reactjs - React Portal 中 nextJS 应用程序的转发样式

javascript - 在 Laravel 应用程序中延迟加载 vue 组件 - 不加载