Angular/HTML5到iOSWKWebView通信

Question

我们正在尝试查看发送某些信号的最佳选择To iOS WKWebView from Angular6、HTML5项目。

任何示例都非常棒。

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

中加载 Angular 页面

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

Answer 1

Apple 在 WebKit 到 post 中提供了一种机制 - 从您的 HTML 到本机的消息：

在您的 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

Angular/HTML5到iOSWKWebView通信

Angular/ HTML5 to iOS WKWebView communication

html

ios

wkwebview

angular