Swift 和 HTML 5 的相互调用

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看293 回复回复1 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 293|回复: 1
收起左侧

Swift 和 HTML 5 的相互调用

[复制链接]
jswift 发表于 2016-9-13 17:31:00 | 显示全部楼层 |阅读模式
快来登录
获取优质的苹果资讯内容
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码
订阅梳理好了的知识点专辑
当前开发的App中,HTML 5的应用场景非常多,常需要两者之间的数据交换,或页面跳转。

参考了相关文档,并整理如下,希望能给敏捷大拇指上的诸位Swift开发者一些帮助。




1、HTML 5 文件

如下:

[HTML] 纯文本查看 复制代码
<html>
<head>
        <meta charset="UTF-8">
        <title>Swift 和 HTML 5 的相互调用 @www.Swifthumb.com:一个神奇的网站</title>
</head>
<body>

        <h1 align="center">标题1(App调用JS,使标题变成红色)</h1>

        <script>
                // JS 调用 App (callbackHandler:要两边一致)
                function callNativeApp(){
                        try {
                                webkit.messageHandlers.callbackHandler.postMessage("I love Swifthumb");
                        } catch(e) {
                                console.log("The native context does not exist yet.");
                        }
                }

                // App 调用 JS 
                function redHeader() {
                        document.querySelector("h1").style.color = "red";
                }
        </script>

        <button style="text-align: center; height: 50px; width: 200px; font-size: 30px; " >调用App</button>

</body>
</html>





2、Native App 调用 JavaScript

一个JavaScript方法对应一个WKUserScript对象。

[Swift] 纯文本查看 复制代码
let conf = WKWebViewConfiguration()
let userScript = WKUserScript(source: "redHeader()", injectionTime: .AtDocumentEnd, forMainFrameOnly: true)
conf.userContentController.addUserScript(userScript)
 
webView = WKWebView(frame: self.view.frame, configuration: conf)





3、JavaScript 调用 Native App



3.1、首先添加一个WKScriptMessageHandler代理

[Swift] 纯文本查看 复制代码
class ViewController: UIViewController, WKScriptMessageHandler




3.2、实现 userContentController 的代理方法

[Swift] 纯文本查看 复制代码
func userContentController(userContentController: WKUserContentController!, didReceiveScriptMessage message: WKScriptMessage!) {
    if(message.name == "callbackHandler") {
        println("JavaScript is sending a message \(message.body)")
    }
}




3.3、WebView启动对JavaScript的监听事件

[Swift] 纯文本查看 复制代码
contentController.addScriptMessageHandler(
    self,
    name: "callbackHandler" 
)




3.4、HTML 5中,添加如下JavaScript:

[JavaScript] 纯文本查看 复制代码
webkit.messageHandlers.callbackHandler.postMessage("I Love you");


关于postMessage,请查看敏捷大拇指上的这个帖子《你不知道的5个HTML5新功能》。




4、效果图:

Swift 和 HTML 5 的相互调用

Swift 和 HTML 5 的相互调用 - 敏捷大拇指 - Swift 和 HTML 5 的相互调用





5、源代码:

下载地址:

游客,如果您要查看本帖隐藏内容请回复


都看到这里了,就把这篇资料推荐给您的好朋友吧,让他们也感受一下。

回帖是一种美德,也是对楼主发帖的尊重和支持。

*声明:敏捷大拇指是全球最大的Swift开发者社区、苹果粉丝家园、智能移动门户,所载内容仅限于传递更多最新信息,并不意味赞同其观点或证实其描述;内容仅供参考,并非绝对正确的建议。本站不对上述信息的真实性、合法性、完整性做出保证;转载请注明来源并加上本站链接,敏捷大拇指将保留所有法律权益。如有疑问或建议,邮件至marketing@swifthumb.com

*联系:微信公众平台:“swifthumb” / 腾讯微博:@swifthumb / 新浪微博:@swifthumb / 官方QQ一群:343549891(满) / 官方QQ二群:245285613 ,需要报上用户名才会被同意进群,请先注册敏捷大拇指

嗯,不错!期待更多好内容,支持一把:
支持敏捷大拇指,用支付宝支付10.24元 支持敏捷大拇指,用微信支付10.24元

评分

参与人数 1金钱 +10 贡献 +10 专家分 +10 收起 理由
Anewczs + 10 + 10 + 10 32个赞!专家给力!

查看全部评分

本帖被以下淘专辑推荐:

3rdev 发表于 2016-9-14 18:11:09 | 显示全部楼层
还不错~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

做任务,领红包。
我要发帖

分享扩散

都看到这里了,就把这资料推荐给您的好朋友吧,让他们也感受一下。
您的每一位朋友访问此永久链接后,您都将获得相应的金钱积分奖励
热门推荐

合作伙伴

Swift小苹果

  • 北京治世天下科技有限公司
  • ©2014-2016 敏捷大拇指
  • 京ICP备14029482号
  • Powered by Discuz! X3.1 Licensed
  • swifthumb Wechat Code
  •   
快速回复 返回顶部 返回列表