iOS原生(swift5)和web(js javascript)相互调用 WKWebView
2023-09-14 09:04:14 时间
下面的方法都是本人亲测有效
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的数据");
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)")
}
2.iOS调用js
iOS调用js
// 重点:IOS 调用 JavaScript 的 navButtonAction 方法,并传递参数
// 使用匿名回调函数接收方法返回值
self.wkWebView!.evaluateJavaScript("navButtonAction('test1',18)") {
(response, error) in
print("message: \(response!)")
}
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)
3.参考博客:
IOS-SwiftUI-IOS原生与JavaScript交互的应用 - 知乎