上一篇博文《WebKit(展示Web介面)》講解了顯示Web頁面，這一篇博文將講解使用WKScriptMessageHandler完成JS互動。

在WKWebView中OC和JS互動也非常簡單，WebKit庫中有個代理WKScriptMessageHandler就是專門來做互動的。

1 WKScriptMessageHandler

1.1 WKScriptMessageHandler協議

WKScriptMessageHandler其實就是一個遵循的協議，它能讓網頁通過JS把訊息傳送給OC。其中協議方法。

• 1
• 2
• 3
• 4
• 5
• 6

從協議中我們可以看出這裡使用了兩個類WKUserContentController和WKScriptMessage。WKUserContentController可以理解為排程器，WKScriptMessage則是攜帶的資料。

1.2 WKUserContentController

WKUserContentController有兩個核心方法，也是它的核心功能。

1. - (void)addUserScript:(WKUserScript *)userScript;: js注入，即向網頁中注入我們的js方法，這是一個非常強大的功能，開發中要慎用。
2. - (void)addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;：新增供js呼叫oc的橋樑。這裡的name對應WKScriptMessage中的name，多數情況下我們認為它就是方法名。

1.3 WKScriptMessage

WKScriptMessage就是js通知oc的資料。其中有兩個核心屬性用的很多。

1. @property (nonatomic, readonly, copy) NSString *name; ：對應- (void)addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;新增的name。
2. @property (nonatomic, readonly, copy) id body;：攜帶的核心資料。

js呼叫時只需

• 1

這裡的name就是我們新增的name，是不是感覺很爽，就是這麼簡單，下面我們就來具體實現。

2 JS呼叫OC

2.1 配置WKUserContentController

要想使用WKUserContentController為web頁面新增橋樑，只需配置到WKWebViewConfiguration即可。

下面改造webView方法。

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

2.2 實現WKScriptMessageHandler

在當前頁面引入WKScriptMessageHandler，並實現WKScriptMessageHandler協議即可。

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

2.3 改造index.html頁面

修改index.html的onClickButton()方法。

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

這裡我們為了測試效果傳入了一個複雜的字典資料，而且字典中還有陣列。input.value代表使用者輸入的資料。

這裡使用了window.webkit.messageHandlers.jsCallOC.postMessage(dict);通知oc，jsCallOC這個屬性就是前面我們通過WKUserContentController注入的。

2.4 測試互動

我們在viewDidLoad使用index.html頁面完成測試。

• 1
• 2
• 3
• 4
• 5
• 6
• 7

執行專案後，在頁面的輸入框中輸入相應資訊，點選確定按鈕。即可在xcode中看見相關列印資訊。

3 OC呼叫JS

3.1 OC通知JS

oc呼叫js就特別簡單了，只需WKWebView呼叫- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ __nullable)(__nullable id, NSError * __nullable error))completionHandler;方法即可。

在上面的列印資訊中，我們會發現我們還沒有實現jsCallOC：方法，接下來我們在jsCallOC:方法中實現通知JS，並將使用者輸入的資訊傳送給JS。

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

3.2 JS響應

OC將通知傳送給JS後，JS要響應這個ocCallJS方法。我們在index.html中的onClickButton()方法下新增ocCallJS方法。

• 1
• 2
• 3
• 4

執行專案，在輸入框輸入資訊後，點選確定按鈕，會發現輸入的資訊在輸入框下面顯示出來。如圖所示。

並在控制檯看見如下列印資訊。

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

4 WKUserScript JS注入

4.1 WKUserScript核心方法

在WebKit框架中，我們還可以預先新增JS方法，供其他人員呼叫。WKUserScript就是幫助我們完成JS注入的類，它能幫助我們在頁面填充前或js填充完成後呼叫。核心方法。

• 1
• 2
• 3
• 4
• 5
• 6

4.2 WKUserScriptInjectionTime列舉

在WKUserScriptInjectionTime列舉中有兩個狀態。

1. WKUserScriptInjectionTimeAtDocumentStart：js載入前執行。
2. WKUserScriptInjectionTimeAtDocumentEnd：js載入後執行。

4.3 js注入

WKUserScript的執行需依託WKUserContentController，接下來我們就為WKWebView注入一個js執行完畢後執行的alert方法。

改造- (WKWebView *)webView方法。