級別：★★☆☆☆
標簽：「iOS與JS交互」「WKWebView與JS交互」「WKWebView攔截協(xié)議」
作者： 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協(xié)議攔截的方式實現(xiàn)iOS與JS交互。
WKWebView是Apple在iOS8推出的Webkit框架中的負責網(wǎng)頁的渲染與展示的類案怯，相比UIWebView速度更快，占用內(nèi)存更少澎办，支持更多的HTML特性嘲碱。

一、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";
  jsToOc(action, token);
}

//! JS調(diào)用OC入口
function jsToOc(action, params) {
  var url = "jsToOc://" + action + "?" + params;
  loadURL(url);
}

//! 加載URL
function loadURL(url) {
  window.location.href = url;
}

• iOS代碼：

#pragma mark - WKNavigationDelegate

//! WKWeView在每次加載請求前會調(diào)用此方法來確認是否進行請求跳轉(zhuǎn)
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    
    if ([navigationAction.request.URL.scheme caseInsensitiveCompare:@"jsToOc"] == NSOrderedSame) {
        [WKWebViewInterceptController showAlertWithTitle:navigationAction.request.URL.host message:navigationAction.request.URL.query cancelHandler:nil];
        decisionHandler(WKNavigationActionPolicyCancel);
    }
    else {
        decisionHandler(WKNavigationActionPolicyAllow);
    }
}

• 實現(xiàn)原理：
  1琅绅、JS與iOS約定好jsToOc協(xié)議扶欣，用作JS在調(diào)用iOS時url的scheme；
  2、JS在登錄成功后加載含有token數(shù)據(jù)的url：(jsToOc://loginSucceed?js_tokenString)料祠；
  3骆捧、iOS的WKWebView在請求跳轉(zhuǎn)前會調(diào)用-webView:decidePolicyForNavigationAction:decisionHandler:方法來確認是否允許跳轉(zhuǎn)；
  4髓绽、iOS在此方法內(nèi)截取jsToOc協(xié)議獲取JS傳過來的數(shù)據(jù)敛苇，用UIAlertController顯示出來，并通過decisionHandler不允許此請求跳轉(zhuǎn)顺呕。

PS1：除了顯示截取到的數(shù)據(jù)枫攀，iOS還可以將navigationAction.request.URL.host看作JS想調(diào)用的方法名，將navigationAction.request.URL.query看作該方法的參數(shù)集株茶，從而體現(xiàn)出JS調(diào)用iOS的概念来涨。
PS2：在-webView:decidePolicyForNavigationAction:decisionHandler:方法中一定要調(diào)用decisionHandler回調(diào)來制定允許請求跳轉(zhuǎn)WKNavigationActionPolicyAllow或者不允許跳轉(zhuǎn)WKNavigationActionPolicyAllow，不然會崩潰启盛。

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

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

• 實現(xiàn)效果：

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

• iOS代碼：

//! 登錄按鈕
UIBarButtonItem *loginBtnItem = [[UIBarButtonItem alloc] initWithTitle:@"登錄" style:UIBarButtonItemStylePlain target:self action:@selector(login:)];
self.navigationItem.rightBarButtonItems = @[loginBtnItem];

//! 登錄方法
- (void)login:(id)sender {
    
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self.webView evaluateJavaScript:@"ocToJs('loginSucceed', 'oc_tokenString')" completionHandler:^(id response, NSError *error) {}];
    });
}

• JS代碼：

//! iOS調(diào)用JS入口
function ocToJs(action, params) {
  document.getElementById("returnValue").innerHTML = action + '?' + params;
}

//! iOS調(diào)用JS數(shù)據(jù)顯示框
<div id = "returnValue" style = "font-size: 18px; border: 1px dotted; height: 50px;"> </div>

• 實現(xiàn)原理：
  1堕阔、iOS與JS約定好ocToJs方法棍厂，用作iOS在調(diào)用JS時的入口方法；
  2超陆、iOS在登錄成功后以loginSucceed和oc_tokenString為參數(shù)拼接JS代碼ocToJs('loginSucceed', 'oc_tokenString');
  3牺弹、iOS使用WKWebView的-evaluateJavaScript:completionHandler:方法執(zhí)行拼接好的JS代碼；
  3时呀、JS在ocToJs方法中將iOS傳過來的數(shù)據(jù)顯示在div元素中张漂；
  4、iOS通過completionHandler收到JS中ocToJs方法的回調(diào)谨娜。

PS：WKWebView的-evaluateJavaScript:completionHandler:方法可以執(zhí)行JS代碼航攒。但只有在整個webView加載完成之后調(diào)用此方法才會有響應(yīng)。比如：我們可以通過如下方式獲取JS的標題趴梢。

//! WKWebView在每次加載請求完成后會調(diào)用此方法
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
    
    [webView evaluateJavaScript:@"document.title" completionHandler:^(NSString *title, NSError *error) {
        self.title = title;
    }];
}

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

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