朋也的博客 » 首页 » 文章

swift4 WKWebView使用JS与Swift交互

作者：朋也
日期：2018-07-05
类别：swift学习笔记(纯代码) 

版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）

创建wkwebview

import WebKit

lazy var webView: WKWebView = {
    let preferences = WKPreferences()
    preferences.javaScriptEnabled = true

    let configuration = WKWebViewConfiguration()
    configuration.preferences = preferences
    configuration.userContentController = WKUserContentController()
    // 给webview与swift交互起一个名字：AppModel，webview给swift发消息的时候会用到
    configuration.userContentController.add(self, name: "AppModel")

    var webView = WKWebView(frame: self.view.frame, configuration: configuration)
    // 让webview翻动有回弹效果
    webView.scrollView.bounces = true
    // 只允许webview上下滚动
    webView.scrollView.alwaysBounceVertical = true
    webView.navigationDelegate = self
    return webView
}()

创建HTML页面

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no"/>
    </head>
    <body>
        名字：<span id="name"></span>
        <br/>
        <button onclick="responseSwift()">响应Swift</button>
        <script type="text/javascript">
            function sayHello(name) {
                document.getElementById("name").innerHTML = name
                return "Swift你也好！"
            }

            function responseSwift() {
                window.webkit.messageHandlers.AppModel.postMessage("WebView点击，发送消息给Swift！")
            }
        </script>
    </body>
</html>

ViewController实现两个协议

两个协议分别是：WKNavigationDelegate WKScriptMessageHandler

Swift调用WebView中的JS方法

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    webView.evaluateJavaScript("sayHello('WebView你好！')") { (result, err) in
        print(result, err)
    }
}

WebView中给Swift发消息

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    print(message.body)
}

详细代码

import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate, WKScriptMessageHandler {

    lazy var webView: WKWebView = {
        let preferences = WKPreferences()
        preferences.javaScriptEnabled = true

        let configuration = WKWebViewConfiguration()
        configuration.preferences = preferences
        configuration.userContentController = WKUserContentController()
        configuration.userContentController.add(self, name: "AppModel")

        var webView = WKWebView(frame: self.view.frame, configuration: configuration)
        webView.scrollView.bounces = true
        webView.scrollView.alwaysBounceVertical = true
        webView.navigationDelegate = self
        return webView
    }()

    let HTML = try! String(contentsOfFile: Bundle.main.path(forResource: "index", ofType: "html")!, encoding: String.Encoding.utf8)

    override func viewDidLoad() {
        self.navigationController?.navigationBar.isTranslucent = false

        super.viewDidLoad()
        title = "WebViewJS交互Demo"
        view.backgroundColor = .white
        view.addSubview(webView)

        webView.loadHTMLString(HTML, baseURL: nil)
    }

    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        webView.evaluateJavaScript("sayHello('WebView你好！')") { (result, err) in
            print(result, err)
        }
    }

    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        print(message.body)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}

相关文章