在Swift中加載HTML網頁有兩個view，分別是WKWebView和UIWebView，這里我使用的是WKWebView

這里分享一下我的寫法：

1、定義變量WKWebView：

lazy var webView: WKWebView = {///偏好設置let preferences = WKPreferences()preferences.javaScriptEnabled = truelet configuration = WKWebViewConfiguration()configuration.preferences = preferencesconfiguration.selectionGranularity = WKSelectionGranularity.characterconfiguration.userContentController = WKUserContentController()// 給webview與swift交互起名字，webview給swift發消息的時候會用到configuration.userContentController.add(WeakScriptMessageDelegate(self), name: "logger")configuration.userContentController.add(WeakScriptMessageDelegate(self), name: "myPosition")configuration.userContentController.add(WeakScriptMessageDelegate(self), name: "getRegistionId")configuration.userContentController.add(WeakScriptMessageDelegate(self), name: "getUserInfo")configuration.userContentController.add(WeakScriptMessageDelegate(self), name: "saveUserInfo")configuration.userContentController.add(WeakScriptMessageDelegate(self), name: "scanCode")configuration.userContentController.add(WeakScriptMessageDelegate(self), name: "alertl")var webView = WKWebView(frame: CGRect(x: 0,y: 44,width: UIScreen.main.bounds.width,height: UIScreen.main.bounds.height-20),configuration: configuration)// 讓webview翻動有回彈效果webView.scrollView.bounces = false// 只允許webview上下滾動webView.scrollView.alwaysBounceVertical = truewebView.navigationDelegate = self//自定義userAgent,用于在瀏覽器中判斷是否在app打開webView.customUserAgent = "iosApp"return webView}()

注意，此加載網頁的視圖控制器需要實現這兩個協議：WKNavigationDelegate,WKScriptMessageHandler

注：這里說明一下這行代碼：configuration.userContentController.add(WeakScriptMessageDelegate(self), name: "logger")

configuration在上面代碼區域可以看到，是定義的一個WKWebViewConfiguration() ,

然后調用它的userContentController.add() ，這里簡單說明一下參數：第一個參數位置WeakScriptMessageDelegate協議，這里是固定寫法，

主要看第二個參數name，name的值需要注意，它是一個字符串，就是我們在js中需要通過這個name，然后點上swift中原生的方法完成交互功能，js中所有需要需要調用swift原生方法的語句，都需要在swift中定義一個對月的name，

下面介紹如何在swift中處理js調用原生方法時判斷調用的是哪一個方法，判斷方法也是通過上面定義的name去區分，可以攜帶參數：

要重寫下面的這個函數：userContentController ，注意參數

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {///接收js調用方法///在控制臺中打印html中console.log的內容,方便調試let body = message.bodyprint("--------js交互了------------")if message.name == "logger" {print("JS Log \(body)")EWToast.showBottomWithText(text: "JS Log: \(body)")return}///message.name是約定好的方法名,message.body是攜帶的參數switch message.name {case "myPosition":///不接收參數時直接不處理message.body即可,不用管Html傳了什么self.myDistance()case "getRegistionId":self.getRegistId()case "getUserInfo":self.getUserInfo()case "saveUserInfo":self.saveInfo(array: message.body as! [AnyObject])case "scanCode":// 打開相機self.openCemera()case "alertl"://這個項目中單獨的Toast提示EWToast.showBottomWithText(text: "觸發成功")default:break}}

仔細一看，每一個case 判斷的字符串就是上面我們定義的name，在js中調用時，它會自動根據你調用原生方法時用的是哪一個，他就會走對應的判斷，然后在case中我們就可以調用原生的方法了，

在js向原生傳遞參數時，可以傳遞數組，這里我用的是數組傳遞，沒看到單個數據怎么傳遞的，

寫法：window.webkit.messageHandlers.saveUserInfo.postMessage(["abcd",1])?

注意代碼標紅的就是我們在swift中定義的name，后面的postMessage這個隨意，看你想做什么用就寫什么，沒什么特殊要求，這里是傳遞消息，主要是參數，我用數組，傳遞不一樣的數據類型也可以，

在swift中接收參數可以看到 我是這么寫的：self.saveInfos(array: message.body as! [AnyObject])??

這樣就可以了！去試試吧！

在多說一句：原生調用js方法：?

webView.evaluateJavaScript("setToken('\(token????"")')",?completionHandler:?nil)

setToken是js提供的function函數如：

function setToken(token){
? ? ? ? ? //操作?
}

總結

以上是生活随笔為你收集整理的swift中WKWebView和JS交互实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。