zl程序教程

您现在的位置是:首页 >  移动开发

当前栏目

iOS原生(swift5)和web(js javascript)相互调用 WKWebView

iosJavaScriptJSWeb 调用 原生 相互 swift5
2023-09-14 09:04:14 时间

几乎是默写出来,加上自己理解的博客(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的数据");

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交互的应用 - 知乎

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

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