WKWebView使用（一）彈框?qū)崿F(xiàn)

WKWebView文章匯總

WKWebView中js無(wú)法主動(dòng)彈出彈框损痰，因此需要通過(guò)WebKit提供的代理方法辽狈，在navite層彈出彈框车吹，并且將彈框的響應(yīng)返回給web層

代理方法說(shuō)明

具體實(shí)現(xiàn)

效果：

效果展示.gif

1、代理方法

WKUIDelegate協(xié)議中提供了彈框方法婚瓜，包括alert沼死、textInput阁吝、confirm。

該協(xié)議還提供了大量的與web交互的方法绷柒，可查看WKWebView詳解（二）- WebKit框架認(rèn)識(shí)

//顯示JavaScript的alert彈框面板志于。
- webView:runJavaScriptAlertPanelWithMessage:initiatedByFrame:completionHandler:

//顯示JavaScript的confirm彈框面板。
- webView:runJavaScriptConfirmPanelWithMessage:initiatedByFrame:completionHandler:

//顯示JavaScript的textInput彈框面板废睦。
webView:runJavaScriptTextInputPanelWithPrompt:defaultText:initiatedByFrame:completionHandler:

2伺绽、具體實(shí)現(xiàn)

2.1 寫一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)

這里增加了彈框響應(yīng)給web層的操作，這里僅做簡(jiǎn)單的彈出顯示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標(biāo)題</title>
<script>
function alertTest(){
    window.alert("message");
}

function confirmTest(){
    var result = window.confirm("message");
    if (result == true){
        alert("true");
    } else {
        alert ("flase");
    }
}

function inputTest(){
    var result = window.prompt("message","嘿哈！");
    if (result != null && result != ""){
        alert(result);
    }
}

</script>
</head>
<body>

<button type="button" onclick="alertTest()" style="color:blue;margin-left:40px;font-size:50px;">alert</button>

<button type="button" onclick="confirmTest()" style="color:red;margin-left:40px;font-size:50px;">confirm</button>

<button type="button" onclick="inputTest()" style="color:green;margin-left:40px;font-size:50px;">input</button>

</body>
</html>

2.2 加載網(wǎng)頁(yè)

#import "ViewController.h"
#import <WebKit/WebKit.h>

@interface ViewController ()<WKURLSchemeHandler, WKNavigationDelegate, WKUIDelegate>
@property (nonatomic, strong) WKWebView *webView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
    CGRect myFrame = self.view.frame;
    self.webView = [[WKWebView alloc] initWithFrame:myFrame configuration:configuration];
    self.webView.UIDelegate = self;
    NSString *path = [[NSBundle mainBundle ] pathForResource:@"first" ofType:@"html"];
    [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]]];
    [self.view addSubview:self.webView];
}

說(shuō)明：

彈出彈框需要遵守WKUIDelegate協(xié)議
通過(guò)loadRequest方法直接加載本地文件

2.3 彈框?qū)崿F(xiàn)

//alert
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{
    if (!message || message.length == 0) {
        completionHandler();
        return;
    }
    UIAlertController *controller = [UIAlertController alertControllerWithTitle:webView.title message:message preferredStyle:UIAlertControllerStyleAlert];
    UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"確定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
        completionHandler();
    }];
    [controller addAction:okAction];

    [self presentViewController:controller animated:YES completion:nil];
}

//confirm
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL))completionHandler{
    if (!message || message.length == 0) {
        completionHandler(NO);
        return;
    }
    UIAlertController *alertController = [UIAlertController alertControllerWithTitle:webView.title message:message preferredStyle:UIAlertControllerStyleAlert];
    
    UIAlertAction * cancelAction = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleDefault 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];
    
}

//input
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable))completionHandler{
    if (!prompt || prompt.length == 0) {
        completionHandler(@"");
        return;
    }
    
    NSString *placeholderText = @"請(qǐng)輸入文本";
    UIAlertController * alertController = [UIAlertController alertControllerWithTitle:webView.title message:prompt preferredStyle:UIAlertControllerStyleAlert];
    [alertController addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
        textField.text = defaultText;
        textField.placeholder = placeholderText;
    }];
    UIAlertAction * action = [UIAlertAction actionWithTitle:@"確定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
        completionHandler(alertController.textFields[0].text ? : @"");
    }];
    [alertController addAction:action];
    
    [self presentViewController:alertController animated:YES completion:nil];
}