4

I call this function when my page is loaded:

function setBeacon() {
if (!navigator.sendBeacon) {
    alert("No navigator beacon available. This is a critical bug which must be fixed.");
}
else
{
    if ('beforeunload' in window) {
        $(window).on('beforeunload', function() {
            generateFormSendBeacon();
            return undefined;
        });
    } else if ('onpagehide' in window) {
        alert("on page hide");
        window.addEventListener("pagehide", function() {
            generateFormSendBeacon();
            return undefined;
        });
    } else {
        alert("Neither beforeunload or onpagehide events are available. Please report this to John, with details about your browser.");
    }
}

This works perfectly on desktop. I am using navigator.sendBeacon in the generateFormSendBeacon() function. It sends it correctly (I have a breakpoint in my server receiving this). On mobile however, in both safari and chrome, the 'beforeunload' event doesn't exist. But according to apple, we should use pagehide instead. The 'on page hide' alert shows; iOS does have access to this event. However the event is never fired, as I never get to the breakpoint in my server. Again; testing the same code path on desktop, it works fine. How does one detect the page unloading on iOS?

jonsploder
  • 307
  • 2
  • 8
  • 1
    Can confirm that on Safari for iOS 13.6.1 `pagehide` event is still not being triggered when clicking "X" on the tab. However, it is triggered when closing the tab by swiping. This is, presumably, a bug. – eggnukes Sep 04 '20 at 11:48

1 Answers1

0

Some browsers ignore dialog prompts when unloading the page. This is expected.

You’re probably running into WebKit issue #193508.

Daniel
  • 4,525
  • 3
  • 38
  • 52