Angular/ HTML5 到 iOS WKWebView 通信

Posted 2023-02-23

【中文标题】Angular/ HTML5 到 iOS WKWebView 通信

【英文标题】：Angular/ HTML5 to iOS WKWebView communication

【发布时间】：2019-11-07 17:57:00

【问题描述】：

我们正在尝试了解发送一些信号到 ios WKWebView 来自 Angular 6，html5 项目的最佳选择。

任何示例都会非常棒。

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

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

【参考方案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:) 方法的 Apple 文档：

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

Apple Documentation link