码迷,mamicode.com
首页 > Web开发 > 详细

WKWebView 里 JS 和 native 通信的例子

时间:2018-11-10 10:50:25      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:inpu   def   注册   with   hub   nat   elf   val   efi   

native 端

  1. 初始化 wkwebview,设置 message handler

    webView = WKWebView.init()
    let usecc = self.webView.configuration.userContentController
    usecc.add(self, name: "testecho")
    
  2. 实现 WKScriptMessageHandler协议

    extension ViewController: WKScriptMessageHandler {
        func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
            mylog("\(self.sendCount) call native , message is \(message.name),")
        }
    }
    
  3. 执行JS 代码

    //jsStr = "echo(\"wordword\")"
    self.webView.evaluateJavaScript(jsStr) { (result, err) in
        self.mylog("\(self.sendCount) \(jsStr.count) bytes callback, result: \(result), err: \(err)")
    }
    

    前端

    <!DOCTYPE html>
    <html>
    <script type="text/javascript">
        function echo(str) {
            console.log(str);
            window.webkit.messageHandlers.testecho.postMessage(str);
    }
    </script>
    <body>
    <input type="button" onClick="echo('toast clicked')" value="toast">
    <input type="button" onClick="echo('alert clicked')" value="Alert">
    </body>
    
    </html>
    

分析

native 端注册了 testecho 的messageHandler,所以 JS 可以通过 window.webkit.messageHandlers.testecho.postMessage 来回调客户端,和文档中说的一样。

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.

参考

WKWebView 里 JS 和 native 通信的例子

标签:inpu   def   注册   with   hub   nat   elf   val   efi   

原文地址:https://www.cnblogs.com/huahuahu/p/WKWebView-li-JS-he-native-tong-xin-de-li-zi.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!