級(jí)別：★★☆☆☆
標(biāo)簽：「iOS與JS交互」「WKWebView與JS交互」「WKUIDelegate」
作者： Xs·H
審校： QiShare團(tuán)隊(duì)

先解釋下標(biāo)題：“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é)議

本文是對(duì)使用WKWebView-協(xié)議攔截和WKWebView-WKScriptMessageHandler協(xié)議實(shí)現(xiàn)iOS與JS交互的補(bǔ)充瞬女。
因?yàn)?code>WKWebView的特性。JS在調(diào)用alert()榕茧、confirm()和prompt()方法時(shí)沒(méi)有反應(yīng)垃沦。若要正常使用這三個(gè)方法，iOS需要實(shí)現(xiàn)WKUIDelegate中的三個(gè)方法模擬JS的這三個(gè)方法用押。

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

• 實(shí)現(xiàn)邏輯：點(diǎn)擊JS的alert按鈕、confirm按鈕和prompt按鈕只恨，iOS通過(guò)對(duì)應(yīng)的方法將數(shù)據(jù)展示出來(lái)译仗。

• 實(shí)現(xiàn)效果：

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

• JS代碼：

//! alert按鈕
<button onclick = "showAlert()" style = "font-size: 18px;">alert(message)</button>

//! confirm按鈕
<button onclick = "showConfirm()" style = "font-size: 18px;">confirm(message)</button>

//! prompt按鈕
<button onclick = "showPrompt()" style = "font-size: 18px;">prompt(prompt, defaultText)</button>

//! 調(diào)用alert(message)
function showAlert() {
  alert("js_alertMessage");
}

//! 調(diào)用confirm(message)
  function showConfirm() {
    confirm("js_confirmMessage");
}

//! 調(diào)用prompt(prompt, defaultMessage)
  function showPrompt() {
    prompt("js_prompt", "js_prompt_defaultMessage");
}

• iOS代碼：

//! 導(dǎo)入WebKit框架頭文件
#import <WebKit/WebKit.h>

//! WKWebViewWKUIDelegateController遵守WKUIDelegate協(xié)議
@interface WKWebViewWKUIDelegateController () <WKUIDelegate>

#pragma mark - WKUIDelegate

//! alert(message)
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler {
    
    UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"Alert" message:message preferredStyle:UIAlertControllerStyleAlert];
    UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
        completionHandler();
    }];
    [alertController addAction:cancelAction];
    [self presentViewController:alertController animated:YES completion:nil];
}

//! confirm(message)
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL))completionHandler {
    
    UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"Confirm" message:message preferredStyle:UIAlertControllerStyleAlert];
    UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
        completionHandler(NO);
    }];
    UIAlertAction *confirmAction = [UIAlertAction actionWithTitle:@"確認(rèn)" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
        completionHandler(YES);
    }];
    [alertController addAction:cancelAction];
    [alertController addAction:confirmAction];
    [self presentViewController:alertController animated:YES completion:nil];
}

//! prompt(prompt, defaultText)
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString *))completionHandler {
    
    UIAlertController *alertController = [UIAlertController alertControllerWithTitle:prompt message:nil preferredStyle:UIAlertControllerStyleAlert];
    [alertController addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
        textField.placeholder = defaultText;
    }];
    UIAlertAction *confirmAction = [UIAlertAction actionWithTitle:@"確認(rèn)" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
        completionHandler(alertController.textFields[0].text);
    }];
    [alertController addAction:confirmAction];
    [self presentViewController:alertController animated:YES completion:nil];
}

• 實(shí)現(xiàn)原理：
  1抬虽、JS調(diào)用alert()方法官觅、confirm()方法和prompt()方法；
  2阐污、iOS實(shí)現(xiàn)WKUIDelegate協(xié)議里面的方法休涤，負(fù)責(zé)上述JS方法的響應(yīng)；

PS1：JS與iOS方法的對(duì)應(yīng)關(guān)系如下：

PS2：WKUIDelegate中的三個(gè)方法都有completionHandlerblock參數(shù)，在iOS實(shí)現(xiàn)對(duì)應(yīng)的功能后必須調(diào)用此block完成回調(diào)功氨，否則會(huì)崩潰序苏。

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

iOS調(diào)用JS方式與上篇文章一致捷凄，都是通過(guò)WKWebView的-evaluateJavaScript:completionHandler:方法來(lái)實(shí)現(xiàn)的忱详。

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