当前开发的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、源代码:

下载地址:

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