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. 彻底关闭win10的自动更新,一定要坚持看到最后一页

    https://jingyan.baidu.com/article/9faa7231e7b78b473c28cbb6.html 是否好使我还在测试,不好使的话,再跟新 2018-05-20 今天电脑又 ...

  2. C山寨C++

    #include <stdio.h> #include <string.h> #include <malloc.h> typedef struct Aclass_s ...

  3. 构造函数constructor 与析构函数destructor（五）

    我们知道当调用默认拷贝构造函数时,一个对象对另一个对象初始化时,这时的赋值时逐成员赋值.这就是浅拷贝,当成员变量有指针时,浅拷贝就会在析构函数那里出现问题.例如下面的例子: //test.h #ifn ...

  4. 2018.09.15 bzoj1977:次小生成树 Tree（次小生成树+树剖）

    传送门 一道比较综合的好题. 由于是求严格的次小生成树. 我们需要维护一条路径上的最小值和次小值. 其中最小值和次小值不能相同. 由于不喜欢倍增我选择了用树链剖分维护. 代码: #include< ...

  5. 2018.09.11 loj#10216.五指山（exgcd）

    传送门 就是一个exgcd的板子. 但注意算距离差的时候是在一个环上面算. 还有,答案要开long long233... 注意这两点之后就是exgcd板子了. 代码: #include<bits ...

  6. C# winIO32位，64位的使用(运行时要用管理员身份)

    下载地址: http://www.internals.com/utilities/WinIo.zip 一个按键的消息产生流程如下: 1)硬件中断/硬件端口数据 WinIO能模拟,或者修改IDT是在这一 ...

  7. UVa 11210 Chinese Mahjong （暴力，递归寻找）

    题意:这个题意.有点麻烦,就是说给定13张牌,让你求能“听”的牌.(具体的见原题) 原题链接: https://uva.onlinejudge.org/index.php?option=com_onl ...

  8. Javascript 中函数的 length 属性

    每个函数都有一个 length属性 (函数名.length), 表示期望接收的函数的个数(而不是实际接收的参数个数) 它与arguments不同. arguments.length 是表示函数实际接收 ...

  9. Informatica bulk和normal模式

    转载:http://bestxiaok.iteye.com/blog/1107612 Bulk 方式进行目标数据的Load,是Informatica提供的一种高性能的Load数据方式.它利用数据库底层 ...

  10. 与数据库连接的页面增删改查 的easyui实现（主要是前端实现）

    一.首先看一下最终实现的效果,上图 二.思路,主要是分两个文件实现,一个是页面显示文件:代码如下: <html> <head> <title>示例管理</ti ...