Handle JavaScript Alerts

PDF for offline use
Sample Code:
Related SDKs:

Let us know how you feel about this

Translation Quality


0/250

This recipe shows how to handle JavaScript alerts in a WKWebView by implementing WKUIDelegate.

Recipe

To handle JavaScript alerts in a WKWebView:

  1. Add the html file (in this example Alerts.html) to your project. Set the Build Action to BundleResource. You can set the Build Action for a file by right-clicking on that file and and choosing Build Action in the menu.
  1. Inherit from the IWKUIDelegate protocol:
public partial class ViewController : UIViewController, IWKUIDelegate
  1. Create a WKWebView and add it to the View:
webView = new WKWebView(View.Frame, new WKWebViewConfiguration());
View.AddSubview (webView);
  1. Load the local Alerts.html file into the WKWebView. The easiest way to do this is with LoadHtmlString.
string htmlPath = NSBundle.MainBundle.PathForResource ("Alerts", "html");
string htmlContents = File.ReadAllText (htmlPath);
webView.LoadHtmlString (htmlContents, null);
  1. Implement the RunJavaScriptAlertPanel method, which will handle a call to alert() in the WKWebView. This allows us to present a native UIAlertController. The alert should display the message and a single OK button.
[Foundation.Export ("webView:runJavaScriptAlertPanelWithMessage:initiatedByFrame:completionHandler:")]
public void RunJavaScriptAlertPanel (WebKit.WKWebView webView, string message, WebKit.WKFrameInfo frame, System.Action completionHandler)
{
    var alertController = UIAlertController.Create (null, message, UIAlertControllerStyle.Alert);
    alertController.AddAction (UIAlertAction.Create ("Ok", UIAlertActionStyle.Default, null));
    PresentViewController (alertController, true, null);

    completionHandler ();
}
  1. Implement RunJavaScriptConfirmPanel, which will handle a call to confirm() in the WKWebView. The alert should display the message and two buttons - OK and Cancel.
[Export ("webView:runJavaScriptConfirmPanelWithMessage:initiatedByFrame:completionHandler:")]
public void RunJavaScriptConfirmPanel (WKWebView webView, string message, WKFrameInfo frame, Action<bool> completionHandler)
{
    var alertController = UIAlertController.Create (null, message, UIAlertControllerStyle.Alert);

    alertController.AddAction (UIAlertAction.Create ("Ok", UIAlertActionStyle.Default, okAction => {
        completionHandler(true);
    }));
    alertController.AddAction (UIAlertAction.Create ("Cancel", UIAlertActionStyle.Default, cancelAction => {
        completionHandler (false);
    }));

    PresentViewController (alertController, true, null);
}
  1. Implement RunJavaScriptTextInputPanel, which will handle a call to prompt() in the WKWebView. The alert should display the prompt, default placeholder text and two buttons - OK and Cancel.
[Foundation.Export ("webView:runJavaScriptTextInputPanelWithPrompt:defaultText:initiatedByFrame:completionHandler:")]
public void RunJavaScriptTextInputPanel (WebKit.WKWebView webView, string prompt, string defaultText, WebKit.WKFrameInfo frame, System.Action<string> completionHandler)
{
    var alertController = UIAlertController.Create (null, prompt, UIAlertControllerStyle.Alert);

    UITextField alertTextField = null;
    alertController.AddTextField ((textField) => {
        textField.Placeholder = defaultText;
        alertTextField = textField;
    });

    alertController.AddAction (UIAlertAction.Create ("Ok", UIAlertActionStyle.Default, okAction => {
        completionHandler (alertTextField.Text);
    }));

    alertController.AddAction (UIAlertAction.Create ("Cancel", UIAlertActionStyle.Default, cancelAction => {
        completionHandler (null);
    }));

    PresentViewController (alertController, true, null);
}

Additional Information

In this example, we are using a local html file, but this will work for any website that displays JavaScript alerts.

Xamarin Workbook

If it's not already installed, install the Xamarin Workbooks app first. The workbook file should download automatically, but if it doesn't, just click to start the workbook download manually.