iOS WKWebView 不显示 javascript alert() 对话框

Question

我在 iOS 8 中获取 WKWebView 以显示从 Javascript 调用的警报对话框时遇到了一些问题。在创建一个标准的 WKWebView 并加载一个 HTML 文件后，我在页面上有一个按钮，可以创建一个带有一些文本的简单警报。这适用于 UIWebView 和 Google Chrome/Safari，但似乎不适用于 WKWebView。任何帮助表示赞赏。

我的设置如下：

WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
config.allowsInlineMediaPlayback = YES;
config.mediaPlaybackRequiresUserAction = false;
_wkViewWeb = [[WKWebView alloc] initWithFrame:_viewWeb.frame config];
_wkViewWeb.scrollView.scrollEnabled = NO;
NSString *fullURL = @"file://.../TestSlide.html";
NSURL *url = [NSURL URLWithString:fullURL];
NSURLRequest *request = [NSURLRequest requestWithURL:url cachePolicy:NSURLRequestReloadIgnoringCacheData timeoutInterval:10];

[_wkViewWeb loadRequest:request];

html有以下功能：

<SCRIPT Language="JavaScript">
function alertTest() {
    alert("Testing Alerts");
}
</SCRIPT>

还有一个按钮：

<b>Test Alerts: <input type="button" value="Alert Popup" onclick="alertTest()"><br></b> <br>

此设置适用于 UIWebView 和常规浏览器，但不适用于 WKWebView。我在配置中遗漏了什么吗？我应该使用 WK 代表之一来控制警报/确认对话框行为吗？谢谢。

Answer 1

1. 将协议实现到您的 WKWebview 容器控制器。 WKUIDelegate

2. 将偏好添加到 WKWebview 以在 viewDidLoad() 中启用 javascript。

   // enable JS
   webView.configuration.preferences.javaScriptEnabled = true
   

3. 在 viewDidLoad() 中将 WKWebview UI 委托注册为

   self.webView.uiDelegate = self
   

4. 在您的类中实现以下委托。

   func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: 
   String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> 
   Void) {
   let alertController = UIAlertController(title: message,message: nil,preferredStyle: 
   .alert)
   
   alertController.addAction(UIAlertAction(title: "OK", style: .cancel) {_ in 
   completionHandler()})
   
   self.present(alertController, animated: true, completion: nil)
   }
   

Answer 2

这是swift：

func webView(webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String,
             initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {

    let alertController = UIAlertController(title: message,
                                            message: nil,
                                            preferredStyle: .alert)

    alertController.addAction(UIAlertAction(title: "OK", style: .cancel) {
        _ in completionHandler()}
    )

    self.present(alertController, animated: true, completion: nil)
}

Answer 3

这是 Swift 4.2

中的代码

func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String,
             initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {

    let alertController = UIAlertController(title: message, message: nil,
                                            preferredStyle: UIAlertController.Style.alert);

    alertController.addAction(UIAlertAction(title: "OK", style: UIAlertAction.Style.cancel) {
        _ in completionHandler()}
    );

    self.present(alertController, animated: true, completion: {});
}

Answer 4

Swift 3 实现了所有 3 个可选功能：

func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo,
             completionHandler: @escaping () -> Void) {

    let alertController = UIAlertController(title: nil, message: message, preferredStyle: .actionSheet)
    alertController.addAction(UIAlertAction(title: "OK", style: .default, handler: { (action) in
        completionHandler()
    }))

    present(alertController, animated: true, completion: nil)
}


func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo,
             completionHandler: @escaping (Bool) -> Void) {

    let alertController = UIAlertController(title: nil, message: message, preferredStyle: .actionSheet)

    alertController.addAction(UIAlertAction(title: "OK", style: .default, handler: { (action) in
        completionHandler(true)
    }))

    alertController.addAction(UIAlertAction(title: "Cancel", style: .default, handler: { (action) in
        completionHandler(false)
    }))

    present(alertController, animated: true, completion: nil)
}


func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo,
             completionHandler: @escaping (String?) -> Void) {

    let alertController = UIAlertController(title: nil, message: prompt, preferredStyle: .actionSheet)

    alertController.addTextField { (textField) in
        textField.text = defaultText
    }

    alertController.addAction(UIAlertAction(title: "OK", style: .default, handler: { (action) in
        if let text = alertController.textFields?.first?.text {
            completionHandler(text)
        } else {
            completionHandler(defaultText)
        }
    }))

    alertController.addAction(UIAlertAction(title: "Cancel", style: .default, handler: { (action) in
        completionHandler(nil)
    }))

    present(alertController, animated: true, completion: nil)
}

Answer 5

要解决此问题，您需要一个 WKUIDelegate 用于您的 Web 视图。代表有责任决定是否应显示警报以及以何种方式显示。您需要为警报、确认和文本输入（提示）实现此功能。

这里是示例代码，没有对页面 url 或安全功能进行任何验证：

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

更多内容请关注Official Documentation

Answer 6

只是为了扩展一点，WKWebView 要求您显示警报、提示并确认自己。通过成为WKUIDelegate 来做到这一点：

#import <WebKit/WebKit.h>
@interface MyController : UIViewController<WKUIDelegate>

然后分配委托：

web.UIDelegate = self;

然后你需要实际实现alert、prompt和confirm。我创建 WKWebViewPanelManager.h/m 作为一个简单的实现，所以这就是我所做的：

- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler {
    [WKWebViewPanelManager presentAlertOnController:self.view.window.rootViewController title:@"Alert" message:message handler:completionHandler];
}

- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler {
    [WKWebViewPanelManager presentConfirmOnController:self.view.window.rootViewController title:@"Confirm" message:message handler:completionHandler];
}

- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler {
    [WKWebViewPanelManager presentPromptOnController:self.view.window.rootViewController title:@"Prompt" message:prompt defaultText:defaultText handler:completionHandler];
}

当然，您可以自行过滤掉错误的警报/确认/提示请求。