iOS与JS交互之WKWebView-WKUIDelegate协议

级别：★★☆☆☆
标签：「iOS与JS交互」「WKWebView与JS交互」「WKUIDelegate」
作者： Xs·H
审校： QiShare团队

先解释下标题：“iOS与JS交互”。iOS指iOS原生代码（文章只有OC示例），JS指WEB前端（不单指JavaScript），交互指JS调用iOS和iOS调用JS。
作者将iOS与JS交互总结成了6种方式，并将逐一介绍。目录如下：

• iOS与JS交互之UIWebView-协议拦截
• iOS与JS交互之UIWebView-JavaScriptCore框架
• iOS与JS交互之UIWebView-JSExport协议
• iOS与JS交互之WKWebView-协议拦截
• iOS与JS交互之WKWebView-WKScriptMessageHandler协议
• iOS与JS交互之WKWebView-WKUIDelegate协议

---

本文是对使用WKWebView-协议拦截和WKWebView-WKScriptMessageHandler协议实现iOS与JS交互的补充。
因为WKWebView的特性。JS在调用alert()、confirm()和prompt()方法时没有反应。若要正常使用这三个方法，iOS需要实现WKUIDelegate中的三个方法模拟JS的这三个方法。

一、JS调用iOS：

• 实现逻辑：点击JS的alert按钮、confirm按钮和prompt按钮，iOS通过对应的方法将数据展示出来。

• 实现效果：

  
  
  

  JS调用iOS实现效果

• JS代码：

//! alert按钮
alert(message)

//! confirm按钮
confirm(message)

//! prompt按钮
prompt(prompt, defaultText)

//! 调用alert(message)
function showAlert() {
  alert("js_alertMessage");
}

//! 调用confirm(message)
  function showConfirm() {
    confirm("js_confirmMessage");
}

//! 调用prompt(prompt, defaultMessage)
  function showPrompt() {
    prompt("js_prompt", "js_prompt_defaultMessage");
}

• iOS代码：

//! 导入WebKit框架头文件
#import 

//! WKWebViewWKUIDelegateController遵守WKUIDelegate协议
@interface WKWebViewWKUIDelegateController () 

#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:@"确认" 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:@"确认" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
        completionHandler(alertController.textFields[0].text);
    }];
    [alertController addAction:confirmAction];
    [self presentViewController:alertController animated:YES completion:nil];
}

• 实现原理：
  1、JS调用alert()方法、confirm()方法和prompt()方法；
  2、iOS实现WKUIDelegate协议里面的方法，负责上述JS方法的响应；

PS1：JS与iOS方法的对应关系如下：

JS方法	WKUIDelegate方法
alert(message)	-webView: runJavaScriptAlertPanelWithMessage: initiatedByFrame:completionHandler:
confirm(message)	-webView:runJavaScriptConfirmPanelWithMessage:initiatedByFrame:completionHandler:
prompt(prompt, defaultText)	-webView:runJavaScriptTextInputPanelWithPrompt:defaultText:initiatedByFrame:completionHandler:

PS2：WKUIDelegate中的三个方法都有completionHandlerblock参数，在iOS实现对应的功能后必须调用此block完成回调，否则会崩溃。

---

二、iOS调用JS：

iOS调用JS方式与上篇文章一致，都是通过WKWebView的-evaluateJavaScript:completionHandler:方法来实现的。

---

• 可从QiShare的Github获取工程源码

---

了解更多iOS及相关新技术，请关注我们的公众号：

关注我们的途径有：
QiShare()
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)

推荐文章：
不一样的React context