Angular/HTML5到iOS WKWebView的通信 [英] Angular/ HTML5 to iOS WKWebView communication

问题描述

我们正在尝试从Angular 6，HTML5项目中向 iOS WKWebView 发送信号的最佳选择是什么.>

任何示例示例都将非常棒.

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

参考 Angular 5和本机IOS/Android通信，还不是很清楚.如果从ios和角度端都有可用的示例，那就太好了.

解决方案

Apple在 WebKit 中提供了一种机制，可将消息从HTML发送到本地:

在您的HTML页面中，致电:

  window.webkit.messageHandlers.messageHandler.postMessage(在此处传递您的数据..."); 

其中， messageHandler 是您的iOS代码中收到的消息的名称.在此处传递您的数据..." 是通过 messageHandler 消息传递到iOS的数据.

在您的iOS代码中:

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

  webView.configuration.userContentController.add(自身，名称:"messageHandler") 

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

  func userContentController(_ userContentController:WKUserContentController，didReceive message:WKScriptMessage){如果message.name =="messageHandler" {//您的消息处理程序代码在这里...} 

按照Apple关于 add(_:name:)方法的文档:

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

Apple文档链接

We are trying to see what is the best option to send some signal To iOS WKWebView from Angular 6, HTML5 project.

Any sample example would be really great.

What we are tyring to do is: we have one button on Angular web page, on click of which it should notify iOS to perform some action. We load Angular page in iOS WKWebView.

With reference to Angular 5 and native IOS/Android communication, it is not very clear. It would be great if there are any samples available from both ios and angular side.

解决方案

Apple provides a mechanism in WebKit to post-messages from your HTML to native:

In your HTML page, call:

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

where, messageHandler is the name of the message received in your iOS code. "Pass your data here..." is the data passed to iOS via messageHandler message.

In your iOS code:

Add a message handler using WKUserContentController's add(_:name:) method like below:

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

Finally, in your ViewController code implement WKScriptMessageHandler's userContentController:didReceiveScriptMessage: method like:

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

As per Apple documentation of the add(_:name:) method:

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到iOS WKWebView的通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！