iOS原生（swift5）和web(js javascript)相互调用 WKWebView_window.webkit

几乎是默写出来，加上自己理解的博客（iOS面试）

下面的方法都是本人亲测有效

1. js调用iOS

js调用：

下面的代码只有写在，iOS中WKWebView加载的H5界面中才有效，单独写在h5界面中会报下面的错误：

TypeError: undefined is not an object(evaluating ‘window.webkit.messageHandlers’)

• postMessage后面的参数可以是一个对象（js object）,也就是iOS中的字典(Dictionary)

window.webkit.messageHandlers.jsToIOS.postMessage("这是js传递到ios的数据");
1

iOS接收：

// jsToIOS 是JavaScript向IOS发送数据时，使用的函数名
    self.wkWebView?.configuration.userContentController.add(self, name: "jsToIOS")

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    print("JS发送到IOS的数据====\(message.body), name=\(message.name)")
}
1
2
3
4
5
6

2.iOS调用js

iOS调用js

// 重点：IOS 调用 JavaScript 的 navButtonAction 方法，并传递参数
     // 使用匿名回调函数接收方法返回值
     self.wkWebView!.evaluateJavaScript("navButtonAction('test1',18)") {
         (response, error) in
         print("message: \(response!)")
     }
1
2
3
4
5
6

iOS向网页注入JS ：

• 注入方法的时候可以把window.webkit.messageHandlers.jsToIOS.postMessage包裹在方法里，这样针对ios和android平台，可以统一调用同一个方法

 // ios 向网页注入 js，注入js分为在网页加载完毕注入(.atDocumentStart)和加载之前注入(.atDocumentEnd)
    let js = "document.getElementsByTagName('h2')[0].innerText='我是ios原生为h5注入的方法'"
    let script = WKUserScript.init(source: js, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
    wkWebView!.configuration.userContentController.addUserScript(script)
1
2
3
4

3.参考博客：

IOS-SwiftUI-IOS原生与JavaScript交互的应用 - 知乎

4.我的另外一篇相关博客：

iOS swift5 webView: WKWebView 简单使用 加载html