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. 旅游类APP原型模板分享——爱彼迎

    这是一款专为游客提供全球范围内短租服务的APP,可以让你不论出门在外或在家附近都能开展探索之旅,并且还可以获取世界各地独特房源.当地体验及好去处等相关信息. 这款APP层级清晰简明,此原型模板所用到的 ...

  2. myeclipse svn 插件去除已经保存的密码方法

    myeclipse svn 插件去除已经保存的密码方法   删除掉C:\Documents and Settings\hao\Application Data\Subversion\auth\svn. ...

  3. spring-data-jpa+hibernate 各种缓存的配置演示

    本文所有测试用代码在https://github.com/wwlleo0730/restjplat 的分支addDB上 目前在使用spring-data-jpa和hibernate4的时候,对于缓存关 ...

  4. 2018.09.19 atcoder Snuke's Coloring(思维题)

    传送门 谁能想到这道题会写这么久. 本来是一道很sb的题啊. 就是每次选一个点只会影响到周围的九个方格,随便1e9进制就可以hash了,但是我非要作死用stl写. 结果由于技术不够高超,一直调不出来. ...

  5. 搭建Idea授权服务器用于学习

    我自己的搭建服务器http://doit.wenyule.top 懒得看教程或弄不好的小伙伴可以用我搭建的,在激活那选择服务器,输入我上面的地址,注意可以激活2018.2.1之前的.为了防止用的人太多 ...

  6. scrapy windows 安装

    windows 7 系统下参照官网安装总是会提示出错,现在整理一下安装的流程 1.安装 python 2.7,添加环境变量 C:\Python27\;C:\Python27\Scripts\; 在 C ...

  7. CentOS 7 x64部署tomcat

    1.jdk1.7 官网地址:jdk下载地址  下载地址:jdk下载地址 2.tomcat 没啥可说,wget 去下载 3.开放端口 firewall-cmd --zone=/tcp --permane ...

  8. PHP 生成16 uuid

    从c# 翻译而来 <?php $i=1; $guidStr=string_make_guid(); echo $guidStr."\n"; $byte_array = unp ...

  9. knowledge_map 修改笔记

    20150110 knowledge_map修改的地方: 1.dialog的调整.把结构图中的dialog(另存,新建知识点)调整到全局中(我的列表,knowledge_map_js_showKnow ...

  10. 99 Times--Kate Voegele

    歌手 Kate Voegele 是美国俄亥俄州的一位年轻创作型歌手,她会唱歌.会写歌.特 别擅长弹吉他.还会弹钢琴.她是美国新生代歌手中的佼佼者. 99 Times--Kate Voegele   S ...