native 端

  1. 初始化 wkwebview，设置 message handler

    1. webView = WKWebView.init()
    2. let usecc = self.webView.configuration.userContentController
    3. usecc.add(self, name: "testecho")

  2. 实现 WKScriptMessageHandler协议

    1. extension ViewController: WKScriptMessageHandler {
    2.     func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    3.         mylog("\(self.sendCount) call native , message is \(message.name),")
    4.     }
    5. }

  3. 执行JS 代码

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

    前端

    1. <!DOCTYPE html>
    2. <html>
    3. <script type="text/javascript">
    4.     function echo(str) {
    5.         console.log(str);
    6.         window.webkit.messageHandlers.testecho.postMessage(str);
    7. }
    8. </script>
    9. <body>
    10. <input type="button" onClick="echo('toast clicked')" value="toast">
    11. <input type="button" onClick="echo('alert clicked')" value="Alert">
    12. </body>
    14. </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 通信的例子的更多相关文章

  1. WebViewJavascriptBridge 进行js 与native通信。

    1,  iOS端加载web页面.开启日志并给webView建立JS与OC的桥梁 - (void)viewWillAppear:(BOOL)animated { if (_bridge) { retur ...

  2. Qtl和JS、HTML通信/交互

    http://www.cnblogs.com/sigma0/p/7346727.html Qt的QWebChannel和JS.HTML通信/交互驱动百度地图 0 前言 我一个研究嵌入式的,不知道怎么就 ...

  3. Qt的QWebChannel和JS、HTML通信/交互驱动百度地图

    Qt的QWebChannel和JS.HTML通信/交互驱动百度地图 0 前言 我一个研究嵌入式的,不知道怎么就迷上了上位机,接了几个项目都是关于Qt,这个项目还是比较经典的,自己没事儿的时候也进行研究 ...

  4. js与native交互

    js与native交互 UIWebView Native调用JS,使用stringByEvaluatingJavaScriptFromString来解释执行js脚本. //script即为要执行的js ...

  5. js与native的交互

    WebView与Javascript交互(Android): WebView与Javascript交互是双向的数据传递,1.H5网页的JS函数调用Native函数 2.Native函数调用JS函数,具 ...

  6. iOS JS 和 OC交互 / JS 和 native 相互调用

    现在app 上越来越多需求是通过UIWebView 来展示html 或者 html5的内容, js 和 native OC代码交互 就非常常见了. js 调用 native  OC代码 第一种机制 ( ...

  7. 【Swift】WKWebView与JS的交互使用

    一.前言 近日,有朋友问我关于WKWebView与JS的交互问题,可我之前一直使用的是UIWebView,也不曾做过WKWebView的交互啊!接下来大家一块学习下WKWebView是怎么实现原生代码 ...

  8. ios WKWebView 与 JS 交互实战技巧

    一.WKWebView 由于Xcode8发布之后,编译器开始不支持iOS 7了,这样我们的app也改为最低支持iOS 8.0,既然需要与web交互,那自然也就选择使用了 iOS 8.0之后 才推出的新 ...

  9. JS操作Cookies的小例子

    这篇文章介绍了JS操作Cookies的小例子,有需要的朋友可以参考一下. 您可能感兴趣的文章:js 保存与获取cookie的代码javascript cookie操作实例详解javascript co ...

随机推荐

  1. mybatis 传参为 Integer 时 ，Mapper 文件 中判断 条件 问题。

    <if test="valiStatus==null || valiStatus=='' || valiStatus==4 "> b.work_permit_card_ ...

  2. a标签的四个伪类

    A标签的css样式   CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”.其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是: :link    :v ...

  3. KBMMW 4.80.00 发布

    一大波更新来了. 4.80.00 March 30 2015 Important notes (changes that may break existing code)        ======= ...

  4. 2018.08.22 NOIP模拟 shop（lower_bound+前缀和预处理）

    Shop 有 n 种物品,第 i 种物品的价格为 vi,每天最多购买 xi 个. 有 m 天,第 i 天你有 wi 的钱,你会不停购买能买得起的最贵的物品.你需要求出你每天会购买多少个物品. [输入格 ...

  5. jbpm(流程管理)

    1.jbpm是什么 JBPM,全称是Java Business Process Management(业务流程管理),它是覆盖了业务流程管理.工作流.服务协作等领域的一个开源的.灵活的.易扩展的可执行 ...

  6. （最小生成树）Agri-Net -- POJ -- 1258

    链接: http://poj.org/problem?id=1258 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82831#probl ...

  7. noip第11课作业

    1.    数字比较 定义一个函数check(n,d),让它返回一个布尔值,如果数字d在正整数n的某位中出现则返回true,否则返回false. 例如:check(325719,3)==true:ch ...

  8. MFC OnOk(),OnCancel(),OnClose(),OnDestroy()的区别总结

    MFC OnOk(),OnCancel(),OnClose(),OnDestroy()的区别总结(转) 第一,OnOK()和OnCancel()是CDialog基类的成员函数,而OnClose()和O ...

  9. 快速排序—三路快排 vs 双基准

    快速排序被公认为是本世纪最重要的算法之一,这已经不是什么新闻了.对很多语言来说是实际系统排序,包括在Java中的Arrays.sort. 那么快速排序有什么新进展呢? 好吧,就像我刚才提到的那样(Ja ...

  10. [IOS] 详解图片局部拉伸 + 实现图片局部收缩

    (图为微信首页右上角『+』效果) 当初还在开发WP7的时候,从IOS同事那边了解到类似微信以上功能的实现. Item条数不同,总高度也不同,这就需要将背景图片进行局部拉伸到响应的高度,并且保持上方的三 ...