因为
WKWebView
的特性。JS在调用alert()
、confirm()
和prompt()
方法时没有反应。若要正常使用这三个方法,iOS需要实现WKUIDelegate
中的三个方法模拟JS的这三个方法。
JS调用iOS:
实现逻辑:点击JS的alert按钮、confirm按钮和prompt按钮,iOS通过对应的方法将数据展示出来。
-
实现效果:
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>
//! 调用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 <WebKit/WebKit.h>
//! WKWebViewWKUIDelegateController遵守WKUIDelegate协议
@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:@"确认" 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
中的三个方法都有completionHandler
block参数,在iOS实现对应的功能后必须调用此block完成回调,否则会崩溃。