【问题标题】:Angular/ HTML5 to iOS WKWebView communicationAngular/ HTML5 到 iOS WKWebView 通信
【发布时间】: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 端都有可用的样本,那就太好了。

【问题讨论】:

    标签: html ios angular wkwebview


    【解决方案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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-04-21
      • 2019-01-09
      • 1970-01-01
      • 2020-03-29
      相关资源
      最近更新 更多