級別：★★☆☆☆
標簽：「iOS與JS交互」「WKWebView與JS交互」「WKJSMessageHandler」
作者： Xs·H
審校： QiShare團隊

先解釋下標題：“iOS與JS交互”。iOS指iOS原生代碼（文章只有OC示例），JS指WEB前端（不單指JavaScript），交互指JS調(diào)用iOS和iOS調(diào)用JS。
作者將iOS與JS交互總結(jié)成了6種方式，并將逐一介紹。目錄如下：

• iOS與JS交互之UIWebView-協(xié)議攔截
• iOS與JS交互之UIWebView-JavaScriptCore框架
• iOS與JS交互之UIWebView-JSExport協(xié)議
• iOS與JS交互之WKWebView-協(xié)議攔截
• iOS與JS交互之WKWebView-WKScriptMessageHandler協(xié)議
• iOS與JS交互之WKWebView-WKUIDelegate協(xié)議

本文介紹如果使用WKWebView的WKScriptMessageHandler實現(xiàn)iOS與JS交互。
WKWebView是Apple在iOS8推出的Webkit框架中的負責網(wǎng)頁的渲染與展示的類，相比UIWebView速度更快，占用內(nèi)存更少，支持更多的HTML特性。WKScriptMessageHandler是WebKit提供的一種在WKWebView上進行JS消息控制的協(xié)議。

一、JS調(diào)用iOS：

• 實現(xiàn)邏輯：點擊JS的登錄按鈕，JS將登錄成功后的token數(shù)據(jù)傳遞給iOS，iOS將收到的數(shù)據(jù)展示出來。

• 實現(xiàn)效果：

  
  
  JS調(diào)用iOS實現(xiàn)效果

• JS代碼：

//! 登錄按鈕
<button onclick = "login()" style = "font-size: 18px;">登錄</button>

//! 登錄
function login() {
  var token = "js_tokenString";
  loginSucceed(token);
}

//! 登錄成功
function loginSucceed(token) {
  var action = "loginSucceed";
  window.webkit.messageHandlers.jsToOc.postMessage(action, token);
}

• iOS代碼：

//! 導入WebKit框架頭文件
#import <WebKit/WebKit.h>

//! WKWebViewWKScriptMessageHandlerController遵守WKScriptMessageHandler協(xié)議
@interface WKWebViewWKScriptMessageHandlerController () <WKScriptMessageHandler>

//! 為userContentController添加ScriptMessageHandler，并指明name
WKUserContentController *userContentController = [[WKUserContentController alloc] init];
[userContentController addScriptMessageHandler:self name:@"jsToOc"];

//! 使用添加了ScriptMessageHandler的userContentController配置configuration
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
configuration.userContentController = userContentController;

//! 使用configuration對象初始化webView
_webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:configuration];

#pragma mark - WKScriptMessageHandler

//! WKWebView收到ScriptMessage時回調(diào)此方法
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    
    if ([message.name caseInsensitiveCompare:@"jsToOc"] == NSOrderedSame) {
        [WKWebViewWKScriptMessageHandlerController showAlertWithTitle:message.name message:message.body cancelHandler:nil];
    }
}

• 實現(xiàn)原理：
  1、JS與iOS約定好jsToOc方法，用作JS在調(diào)用iOS時的方法；
  2、iOS使用WKUserContentController的-addScriptMessageHandler:name:方法監(jiān)聽name為jsToOc的消息；
  3、JS通過window.webkit.messageHandlers.jsToOc.postMessage()的方式對jsToOc方法發(fā)送消息；
  4、iOS在-userContentController:didReceiveScriptMessage:方法中讀取name為jsToOc的消息數(shù)據(jù)message.body。

PS：[userContentController addScriptMessageHandler:self name:@"jsToOc"]會引起循環(huán)引用問題。一般來說，在合適的時機removeScriptMessageHandler可以解決此問題。比如：在-viewWillAppear:方法中執(zhí)行add操作，在-viewWillDisappear:方法中執(zhí)行remove操作。如下：

- (void)viewWillAppear:(BOOL)animated {
    
    [super viewWillAppear:animated];
    
    [_webView.configuration.userContentController addScriptMessageHandler:self name:@"jsToOc"];
}

- (void)viewWillDisappear:(BOOL)animated {
    
    [super viewWillDisappear:animated];
    
    [_webView.configuration.userContentController removeScriptMessageHandlerForName:@"jsToOc"];
}

二、iOS調(diào)用JS：

iOS調(diào)用JS方式與上篇文章一致，都是通過WKWebView的-evaluateJavaScript:completionHandler:方法來實現(xiàn)的。

• 可從QiShare的Github獲取工程源碼

續(xù)篇：iOS與JS交互之WKWebView-WKUIDelegate協(xié)議

了解更多iOS及相關(guān)新技術(shù)，請關(guān)注我們的公眾號：

關(guān)注我們的途徑有：
QiShare(簡書)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公眾號)

推薦文章：
不一樣的React context