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. 【附案例】UI交互设计不会做？设计大神带你开启动效灵感之路

    随着网络技术的创新发展,如今UI交互设计应用越来越广泛,显然已经成为设计的主流及流行的必然趋势.UI界面交互设计中的动效包括移动,滑块,悬停效果,GIF动画等.UI界面交互设计为何越来越受到青睐?它有 ...

  2. 2018.09.28 牛客网contest/197/B面积并（二分+简单计算几何）

    传送门 比赛的时候把题目看成求面积交了,一直没调出来. 下来发现是面积并气的吐血. 码了一波发现要开long double. 然而直接用现成的三角函数会挂. 因此需要自己手写二分求角度. 大致思路就是 ...

  3. 2018.09.15点名器（简单dp）

    描述 Ssoier在紧张的学习中,杜老师每天给他们传授精妙的知识. 杜老师为了活跃气氛,设计了一个点名器,这个点名器包含一个长度为M的数组(下标1开始),每个元素是一个oier的名字,每次点名的时候, ...

  4. PHP compact函数

    $firstname = "Peter"; $lastname = "Griffin"; $age = "41"; $data = comp ...

  5. hdu-1128（数学问题，筛数）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1128 思路:从0,开始,每次求一个数x的d(x),然后判断如果x没有标记,则说明x没有由任意一个d(i ...

  6. hdu-1070(水题)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1070 题意:一个人喝牛奶,有三个原则: 1.牛奶的日期不超过6天,就是最多5天. 2.每次只喝200m ...

  7. LA 4670 Dominating Patterns （AC自动机）

    题意:给定n个字符串和一个文本串,查找哪个字符串出现的次数的最多. 析:一匹配多,很明显是AC自动机.只需要对原来的进行修改一下,就可以得到这个题的答案, 计算过程中,要更新次数,并且要映射字符串.如 ...

  8. python3中 for line1 in f1.readlines():，for line1 in f1:，循环读取一个文件夹

    循环读取一个文件: fr.seek(0) fr.seek(0, 0) 概述 seek() 方法用于移动文件读取指针到指定位置. 语法 seek() 方法语法如下: fileObject.seek(of ...

  9. SPSS—回归—曲线估计方程案例解析

    上一节介绍了线性回归,虽然线性回归能够满足大部分的数据分析的要求,但是,线性回归并不是对所有的问题都适用, 因为有时候自变量和因变量是通过一个已知或未知的非线性函数关系相联系的,如果通过函数转换,将关 ...

  10. SPSS-两变量相关性分析

    两个变量之间存在确定性:关系和不确定关系(会存在一定的波动范围),就好比你的亲生母亲绝对只有一个,而你的亲叔叔可能有好几个(可以在1叔—4叔之间波动) 相关性一般分为   1:强正相关关系  (一个值 ...