JS调用iOS之WKUIDelegate协议

因为WKWebView的特性。JS在调用alert()confirm()prompt()方法时没有反应。若要正常使用这三个方法,iOS需要实现WKUIDelegate中的三个方法模拟JS的这三个方法。

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

  • 实现效果:

    image
  • 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中的三个方法都有completionHandlerblock参数,在iOS实现对应的功能后必须调用此block完成回调,否则会崩溃。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 级别:★★☆☆☆标签:「iOS与JS交互」「WKWebView与JS交互」「WKUIDelegate」作者: Xs...
    QiShare阅读 8,298评论 0 19
  • 前言: 目录:一、WKWebView基本介绍二、WKWebView新特性三、WebKit框架概览四、WKWebVi...
    麦穗0615阅读 1,181评论 0 8
  • WKWebView是苹果在iOS 8之后推出的框架WebKit中的浏览器控件, 其加载速度比UIWebView快了...
    xzm_prefect阅读 506评论 0 0
  • 泰山不让土壤,故能成其大;河海不择细流,故能就其深。这段话是出自李斯的《谏逐客书》,言内之意是说,泰山所以有这样的...
    跳舞的麻雀阅读 177评论 0 2
  • 刚上大学的时候我特别想谈一场恋爱。 于是我对每一个从我身边经过的男孩都细细地打量。甚至我就只是在学校的某个...
    今年很流行阅读 188评论 0 0