h5通知webview 使用window.postMessage

H5通知Webview通常通过`window.postMessage` API实现跨窗口通信。这个API允许网页向同源的其他页面（包括嵌套的iframe或Webview）发送消息，而无需涉及复杂的浏览器插件或者文件访问权限。当你在HTML5页面中调用`window.postMessage`，你可以传递数据，并指定接收方的回调函数，这样Webview就可以接收到并处理这些消息。

例如，Webview内的JavaScript可以这样设置监听：

window.addEventListener('message', function(event) {
  if (event.origin === 'http://your-webapp-domain.com') { // 验证来源
    console.log('Received message:', event.data);
    // 这里可以根据接收到的消息执行相应的操作
  }
}, false);

而在外部网页（H5页面），你可以像这样发送消息：

window.top.postMessage('Hello from external page', '*');

这里，`'Hello from external page'`是你要传递的数据，`'*'`表示接受所有来源。

相关问题

window.ReactNativeWebView.postMessage

window.ReactNativeWebView.postMessage是在React Native的WebView组件中用于向WebView发送消息的方法。它允许你将数据传递给WebView以供处理或显示。在你的代码示例中，它被用于将值'hello world'发送给React Native的WebView组件。这个方法可以通过在JavaScript中调用window.ReactNativeWebView.postMessage(data)来实现。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [React Native中WebView与html双向通信遇到的坑](https://blog.csdn.net/qq_38334677/article/details/128808083)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [React Native 内嵌h5页面(基于vue)的实现方案调研](https://blog.csdn.net/llz0725/article/details/123241274)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

window.webkit.messageHandlers.<handlerName>.postMessage(<message>) 例子

下面是一个使用 `window.webkit.messageHandlers.<handlerName>.postMessage(<message>)` 进行消息传递的简单例子：

在 H5 页面中，可以使用以下代码向 iOS App 发送消息：

window.webkit.messageHandlers.myHandler.postMessage("Hello from H5");

在 iOS App 中，需要进行相应的设置来接收并处理这个消息。以下是一个示例代码：

import WebKit

class ViewController: UIViewController, WKScriptMessageHandler {
    var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let configuration = WKWebViewConfiguration()
        
        // 注册 messageHandler
        configuration.userContentController.add(self, name: "myHandler")
        
        webView = WKWebView(frame: view.bounds, configuration: configuration)
        view.addSubview(webView)
        
        // 加载 H5 页面
        if let htmlPath = Bundle.main.path(forResource: "index", ofType: "html") {
            let htmlUrl = URL(fileURLWithPath: htmlPath)
            webView.loadFileURL(htmlUrl, allowingReadAccessTo: htmlUrl)
        }
    }
    
    // 实现 WKScriptMessageHandler 的代理方法，接收并处理从 H5 发送过来的消息
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "myHandler" {
            if let body = message.body as? String {
                print("Received message from H5: \(body)")
                
                // 在这里可以进行相应的处理逻辑
            }
        }
    }
}

在这个例子中，我们注册了名为 "myHandler" 的 messageHandler，并在 H5 页面中使用 `window.webkit.messageHandlers.myHandler.postMessage("Hello from H5")` 发送消息。在 iOS App 中，我们实现了 `WKScriptMessageHandler` 的代理方法 `userContentController(_:didReceive:)` 来接收并处理从 H5 发送过来的消息。

当 H5 页面中调用 `window.webkit.messageHandlers.myHandler.postMessage(<message>)` 时，iOS App 中的 `userContentController(_:didReceive:)` 方法会被调用，我们可以在这个方法中获取到消息内容，然后进行相应的处理。

希望这个例子能够帮助你理解如何在 iOS App 中接收来自 H5 页面的消息。如果有任何问题，请随时提问！