Angular/HTML5到iOS WKWebView的通信

Question

我们正在尝试从Angular 6，HTML5项目向iOSWKWebView发送一些信号的最佳选择。

任何一个示例都非常棒。

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

关于Angular 5和原生IOS/Android通信，目前还不太清楚。如果ios和angular side都有可用的样本，那就太好了。

Answer 1

Apple在WebKit中提供了一种机制，可以将消息从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:)方法的文档：

添加具有名称的脚本消息处理程序导致JavaScript函数window.webkit.messageHandlers.name.postMessage(messageBody(在使用用户内容控制器的所有web视图的所有框架中定义。

苹果文档链接