如何将 WKWebview 中的 postmessage 调用到 JS？答案

【问题标题】：How to call postmessage in WKWebview to JS?如何将 WKWebview 中的 postmessage 调用到 JS？
【发布时间】：2023-04-02 01:30:02
【问题描述】：

您好我想问一下，所以我在 WKWebView IOS 中遇到了问题

所以我想像这样向 JS 发布消息

 window.webkit.messageHandlers.postMessageListener.postMessage(JSON.stringify({data}))

但在 JS 中什么也没发生

否则在安卓中

"window.postMessage(JSON.stringify({data}))"

就像这样和 JS 对此给予响应

现在我想问一下我的脚本有什么问题？

抱歉英语语法不好

【问题讨论】：

标签： javascript ios swift wkwebview

【解决方案1】：

简单的解释可以查看这篇文章：

https://medium.com/@hoishing/using-javascript-with-wkwebview-64f94153ad0

如果你想要更深入的解释，你可以查看这篇其他文章：

https://dev.to/gualtierofr/wkwebview-and-javascript-interaction-1pbl

在两篇文章中都提到了如何从 Swift 触发 Javascript 函数 和 接收 Javascript 消息

无论如何，如果你在 JavaScript 中执行这个函数：

window.webkit.messageHandlers.postMessageListener.postMessage(JSON.stringify({data}))

您必须以这种方式在 Swift 中收听名称 postMessageListener：

设置 WKWebView

let preferences = WKPreferences()
preferences.javaScriptEnabled = true
let configuration = WKWebViewConfiguration()
configuration.preferences = preferences

// Here I am guessing that the Frame of the WebView is the entire Screen
let webView = WKWebView(frame: view.frame, configuration: configuration)


configuration.userContentController.add(self, name: "postMessageListener")

遵守协议WKScriptMessageHandler

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
   if message.name == "postMessageListener" {
       // Manage your Data
   }
}

【讨论】：

【解决方案2】：

使用postMessage处理程序将来自WKWebview's网页的数据发送到本机代码，

import UIKit
import WebKit

class ViewController: UIViewController, WKScriptMessageHandler {

    lazy var webView: WKWebView = {
        let   webCfg:WKWebViewConfiguration = WKWebViewConfiguration()

        // Setup WKUserContentController instance for injecting user script
        var userController:WKUserContentController = WKUserContentController()

        // Add a script message handler for receiving  "buttonClicked" event notifications posted from the JS document using  window.webkit.messageHandlers.postMessageListener.postMessage(JSON.stringify({data})) script message
        userController.add(self, name: "nativeListener")
        // Configure the WKWebViewConfiguration instance with the WKUserContentController
        webCfg.userContentController = userController;

        let webView = WKWebView(frame: CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height), configuration: webCfg)
        return webView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        webView.configuration.preferences.javaScriptEnabled = true
        self.view.addSubview(webView)
        let urlToLoad  = URL(string: "your_url_string")
        // Do any additional setup after loading the view.
        webView.load(URLRequest(url:urlToLoad!))
    }


    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
     if message.name == "nativeListener" {
          print(message.body) // prints the data that is sent from javascript
       }
    }
}

【讨论】：