本篇是基于Swift4.0為大家介紹下WKWebView與JS的交互.

OC版本請跳轉OC WKWebView與JS交互.

1.WKWebView調用JS

WKWebView可以直接使用下放方法調用JS.

open func evaluateJavaScript(_ javaScriptString: String, completionHandler: ((Any?, Error?) -> Swift.Void)? = nil)

舉個例子.我們需要獲取,一段HTML標簽的內容.
HTML標簽內容如下:

<input style="display:none;" name="input"  value='I am Input'/>

我們需要在網頁加載完成的時候進行獲取,那么我們首先服從WKNavigationDelegate協議,并且設置代理.然后在如下代理方法中執行JS方法.

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
      /// wkWebView調用js方法
      let js = "document.getElementsByName('input')[0].attributes['value'].value"
      wkWebView.evaluateJavaScript(js) { (response, error) in
            print("response:", response ?? "No Response", "\n", "error:", error ?? "No Error")
      }
}

通過以上操作就成功獲取到input標簽的value屬性值了.如果報錯,可以通過error進行相應的錯誤處理.

2.JS調用Swift

當JS端想傳一些數據給Swift.那它們會調用下方方法來發送.

window.webkit.messageHandlers.<方法名>.postMessage(<數據>)

上方代碼在JS端寫會報錯,導致網頁后面業務不執行.可使用try-catch執行.

try {
      //使用此方法,會報錯,因此使用try-catch
      window.webkit.messageHandlers.<方法名>.postMessage(<數據>);
 } catch(error) {
      console.log('WKWebView post message');
}

那么下面就要在Swift接收JS傳來的數據了.
我們可以在WKScriptMessageHandler協議中的方法來檢測傳來的數據.
首先要對WKWebView添加方法名檢測的方法.

wkWebView.configuration.userContentController.add(self, name: <方法名>)

此時的代理對象為self(控制器本身),會存在內存泄露問題

然后服從WKScriptMessageHandler協議,在它的協議方法中我們就可以檢測到傳來的數據啦.

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
      print("傳來的數據為", message.body)
}

3.JS調用Swift - 內存泄露

上方已經講到,將WKScriptMessageHandler設置為self,會造成內存泄露問題.運行一下上述方法,會發現WKWebView所在控制器不走deinit()方法.
我們可以創建一個專門用于檢測傳來數據的代理轉接下.
代碼如下:

import UIKit
import WebKit

class WeakScriptMessageDelegate: NSObject, WKScriptMessageHandler {
    weak var scriptDelegate: WKScriptMessageHandler?
    
    init(_ scriptDelegate: WKScriptMessageHandler) {
        self.scriptDelegate = scriptDelegate
        super.init()
    }
    
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        scriptDelegate?.userContentController(userContentController, didReceive: message)
    }
    
    deinit {
        print("WeakScriptMessageDelegate is deinit")
    }
}

將它作為WKScriptMessageHandler的代理,進行轉接.
使用時只需要將原本添加檢測方法中的self,替換為WeakScriptMessageDelegate的實例就行了.

wkWebView.configuration.userContentController.add(WeakScriptMessageDelegate.init(self), name: <方法名>)

現在解決了控制器的回收,那么我們的轉接代理同樣也要釋放.
在控制器的deinit()方法將其釋放一下就OK啦.

deinit {
      wkWebView.configuration.userContentController.removeScriptMessageHandler(forName: <方法名>)
      print("WKWebViewController is deinit")
}