html - Angular/HTML5 到 iOS WKWebView 通信

Question

我们正在尝试查看发送信号的最佳选择 至 iOS WKWebView 来自 Angular 6，HTML5 项目。

任何示例示例都非常棒。

我们要做的是:我们在 Angular 网页上有一个按钮，点击它应该通知 iOS 执行一些操作。
我们在 iOS 中加载 Angular 页面 WKWebView .

引用Angular 5 and native IOS/Android communication ，不是很清楚。如果 ios 和 angular 方面都有可用的样本，那就太好了。

Answer 1

Apple 在 WebKit 中提供了一个机制将消息从您的 HTML 发布到 native :

在您的 HTML 页面中，调用:

window.webkit.messageHandlers.messageHandler.postMessage("Pass your data here...");

其中， messageHandler是在您的 iOS 代码中收到的消息的名称。 "Pass your data here..."是通过 messageHandler传递给iOS的数据信息。

在您的 iOS 代码中:

使用 WKUserContentController 的 add(_:name:) 添加消息处理程序方法如下:

webView.configuration.userContentController.add(self, name: "messageHandler")

最后，在您的 ViewController代码实现 WKScriptMessageHandler 的 userContentController:didReceiveScriptMessage:方法如:

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
     if message.name == "messageHandler" {
          // Your Message handler code goes here...            
     }

根据 add(_:name:) 的 Apple 文档方法:

Adding a script message handler with name name causes the JavaScript function window.webkit.messageHandlers.name.postMessage(messageBody) to be defined in all frames in all web views that use the user content controller.

Apple Documentation link