window.webkit.messageHandlers 用法举例说明

> window.webkit.messageHandlers 是用于在 iOS 的 WebView 中与本地代码进行交互的 JavaScript 对象。它提供了一种可靠和安全的方式来从 Web 页面发送消息到本地代码，并从本地代码接收回复消息。

以下是一个使用 window.webkit.messageHandlers 的示例：

#### 1. HTML 页面中添加一个按钮：
```html
<button onclick="callNative()">调用本地代码</button>
```
#### 2. JavaScript 代码中定义 callNative 函数，并使用 window.webkit.messageHandlers 发送消息到本地代码：
```javascript
function callNative() {
  if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.myHandler) {
    window.webkit.messageHandlers.myHandler.postMessage({data: 'hello'});
  } else {
    console.log("messageHandlers not available");
  }
}
```
在上面的代码中，我们检查了 `window.webkit.messageHandlers` 是否可用，并使用 `window.webkit.messageHandlers.myHandler.postMessage` 方法发送了一条消息到名为 "myHandler" 的本地代码处理程序。

#### 3. 在本地代码中实现名为 "myHandler" 的处理程序：
```swift
class ViewController: UIViewController, WKScriptMessageHandler {
    override func viewDidLoad() {
        super.viewDidLoad()

let contentController = WKUserContentController()
        contentController.add(self, name: "myHandler")

let config = WKWebViewConfiguration()
        config.userContentController = contentController

let webView = WKWebView(frame: .zero, configuration: config)
        view.addSubview(webView)

if let url = URL(string: "https://www.example.com") {
            webView.load(URLRequest(url: url))
        }
    }

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "myHandler" {
            if let body = message.body as? [String: Any] {
                let data = body["data"] as? String
                // 调用本地方法
                // ...
            }
        }
    }
}
```

>在上面的代码中，我们创建了一个名为 "myHandler" 的处理程序，并将它添加到 `WKUserContentController` 中。当从 Web 页面中发送的消息到达时，userContentController(_\:didReceive\:)  【这里去掉反斜杠 \ 哦】方法将被调用。在这个方法中，我们检查了消息的名称是否为 `"myHandler"`，并提取了消息的内容。然后，我们可以使用这些内容来调用本地方法。

需要注意的是，使用 `window.webkit.messageHandlers` 可以提供一个可靠和安全的方法来从 Web 页面中调用本地代码。但是，为了确保安全，我们应该谨慎地处理从 Web 页面中传递过来的数据，以避免潜在的安全问题。

相关推荐

近期文章