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 通信的例子的更多相关文章

  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. 将Tomcat设置为自动启动的服务最快捷方法

    将Tomcat设置为自动启动的服务: 最近遇到了个问题,服务器上的项目突然访问不了,就上服务器去重启了tomcat服务,谁知道到最后tomcat的服务报错了,重新启动服务的选项 也没有,之前这个项目也 ...

  2. 2018.09.24 codeforces 1053C. Putting Boxes Together（线段树）

    传送门 就是让你维护动态的区间带权中位数. 然而昨晚比赛时并没有调出来. 想找到带权中位数的中点可以二分(也可以直接在线段树上找). 也就是二分出第一个断点,使得断点左边的和恰好大于或等于断点右边的和 ...

  3. arduino 驱动电调

    #include <TimerOne.h> #define PPMPIN 7 ; //0-9 ; void setup() { // put your setup code here, t ...

  4. 《C++ Primer （V4）》读书笔记

    第2章 变量和基本类型 1.(P56)如果使用class关键字来定义类,那么定义在第一个访问标号前的任何成员都隐式指定为private:如果使用struct关键字,那么这些成员都是public. 第7 ...

  5. Django 必会面试题总结

    1 列举Http请求中常见的请求方式 HTTP请求的方法: HTTP/1.1协议中共定义了八种方法(有时也叫“动作”),来表明Request-URL指定的资源不同的操作方式   注意: 1)方法名称是 ...

  6. UVa 11464 Even Parity （二进制法枚举）

    题意:给你一个n*n的01矩阵,让你把最少的0变成1,使得每个元素的上,下,左,右的元素(如果有的话)之和均为偶数. 析:最好想的的办法就是暴力,就是枚举每个数字是变还是不变,但是...时间复杂度也太 ...

  7. （矩阵快速幂） Fibonacci -- poj -- 3070

    链接: http://poj.org/problem?id=3070   Fibonacci Time Limit: 1000MS   Memory Limit: 65536K Total Submi ...

  8. idea 优化

    http://www.iyunv.com/thread-348537-1-1.html

  9. Time&Patience

    “时间和耐心,是世间最强大的两个勇士.” “对未来越有信心,对今天越有耐心,坚持做正确的事.” 每日必做清单 每天六组俯卧撑    活在当下    接收脆弱    一万小时理论(罗马不是一天建成的,胖 ...

  10. 好久不发帖，转一下公司技术美术独立完成的U3D模拟暗黑泰瑞尔翅膀物理运动效果

    想入公司倍培养成为优秀的技术型美术,欢迎call我! Max制作翅膀模型部分 新建一个片面,模型给一些段数,赋予一张左右二方连续贴图. 加个FFD 4*4*4,并稍微拉出一点弧度. 将头尾的Alpha ...