Skip to content

How to trigger different WKUIDelegate methods

Jump to bottom
lmarceau edited this page Feb 5, 2025 · 2 revisions

Context

In Firefox iOS, we have different WKUIDelegate methods implemented. Sometimes, making modifications under those code path can be tricky since we don't necessarily always have the website to test each use case. Here's how to trigger each WKUIDelegate delegate method we have in our app.

createWebViewWith

createWebViewWith is triggered either from a window.open() JavaScript call or clicking a link that contains target="_blank" as seen on mdn.

_blank: Usually a new tab, but users can configure browsers to open a new window instead.

  1. Open W3 school website to try html code
  2. Copy and paste the following code and then press run.
  3. Click on "Open in New Window", then this will trigger a new window to open.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebView Test</title>
</head>
<body>

    <h2>Test WKWebView Window Open and Close</h2>

    <!-- Link to open in a new window -->
    <a href="https://www.mozilla.org/" target="_blank">Open in New Window</a>

    <br><br>

</body>
</html>

runJavaScriptAlertPanelWithMessage

  1. Open W3 school website to try html code
  2. Copy and paste the following code and then press run.
  3. Click on "Open Alert", then this will trigger the JavaScript alert.
<html>
<body>
    <h1>The Window Object</h1>
    <h2>The alert() Method</h2>
    <p>Click the button to display an alert box after 2 seconds.</p>
    <button onclick="myFunction()">Open Alert</button>
    <script>
        function myFunction() {
            // Delay the alert for 2 seconds (2000 milliseconds)
            setTimeout(function() {
                alert("This is a delayed alert!");
            }, 2000);
        }
    </script>
</body>
</html>

runJavaScriptConfirmPanelWithMessage

  1. Open W3 school website to try html code
  2. Copy and paste the following code and then press run.
  3. Click on "Open Alert", then this will trigger the confirm alert.
<!DOCTYPE html>
<html>
<body>
    <h1>The Window Object</h1>
    <h2>The alert() Method</h2>
    <p>Click the button to display an alert box after 5 seconds.</p>
    <button onclick="myFunction()">Open Alert</button>
    <script>
        function myFunction() {
            // Delay the alert for 2 seconds (2000 milliseconds)
            setTimeout(function() {
                confirm("this is a confirm message");
            }, 2000);
        }
    </script>
</body>
</html>

runJavaScriptTextInputPanelWithPrompt

  1. Open W3 school website to try html code
  2. Copy and paste the following code and then press run.
  3. Click on "Open Alert", then this will trigger the prompt alert.
<!DOCTYPE html>
<html>
<body>
    <h1>The Window Object</h1>
    <h2>The alert() Method</h2>
    <p>Click the button to display an alert box after 2 seconds.</p>
    <button onclick="myFunction()">Open Alert</button>
    <script>
        function myFunction() {
            // Delay the alert for 2 seconds (2000 milliseconds)
            setTimeout(function() {
                prompt("test prompt");
            }, 2000);
        }
    </script>
</body>
</html>

webViewDidClose

This is a more complicated path to trigger, since webViewDidClose is triggered from a popup window as explained on mdn.

This method can only be called on windows that were opened by a script using the Window.open() method, or on top-level windows that have a single history entry.

  1. Open W3 school website to try html code
  2. Copy and paste the following code and then press run.
  3. Click on "Open New Window", then this will trigger a new window to open, in which you can trigger the close button to call webViewDidClose 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebView Window Test</title>
    <script>
        function openNewWindow() {
            let newWin = window.open("about:blank", "_blank", "width=500,height=500");
            if (newWin) {
                newWin.document.write('<html><head><title>New Window</title></head><body>');
                newWin.document.write('<h2>This is a new window</h2>');
                newWin.document.write('<button onclick="window.close();">Close Window</button>');
                newWin.document.write('</body></html>');
                newWin.document.close();
            } else {
                alert("Popup blocked! Please allow popups for this site.");
            }
        }
    </script>
</head>
<body>

    <h2>Test WKWebView Window Open and Close</h2>

    <!-- Button to open a new window -->
    <button onclick="openNewWindow();">Open New Window</button>

</body>
</html>

contextMenuConfigurationForElement

That is the easiest to trigger, you only need to long-press on a link on a web page. Wikipedia has tons of links to long press.

requestMediaCapturePermissionFor

  1. Open W3 school website to try html code
  2. Copy and paste the following code and then press run.
  3. Click on "Request Camera & Microphone", then this will trigger media permission.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Capture Permission Test</title>
</head>
<body>

    <h2>Test WKWebView Media Capture Permission</h2>
    <button onclick="requestMedia()">Request Camera & Microphone</button>

    <script>
        function requestMedia() {
            navigator.mediaDevices.getUserMedia({ video: true, audio: true })
                .then(stream => {
                    alert("Media access granted!");
                })
                .catch(error => {
                    alert("Media access denied: " + error.message);
                });
        }
    </script>

</body>
</html>
Clone this wiki locally