onbeforeunload support detection

beforeunload jquery
onbeforeunload preventdefault
blocked alert during beforeunload
beforeunload react
window.onbeforeunload cancel event
javascript detect leaving page
conditional onbeforeunload
chrome onbeforeunload

I'd like to check if the current browser supports the onbeforeunload event. The common javascript way to do this does not seem to work:

if (window.onbeforeunload) {
    alert('yes');
}
else {
    alert('no');
}

Actually, it only checks whether some handler has been attached to the event. Is there a way to detect if onbeforeunload is supported without detecting the particular browser name?

I wrote about a more-or-less reliable inference for detecting event support in modern browsers some time ago. You can see on a demo page that "beforeunload" is supported in at least Safari 4+, FF3.x+ and IE.

Edit: This technique is now used in jQuery, Prototype.js, Modernizr, and likely other scripts and libraries.

WindowEventHandlers.onbeforeunload, returnValue to prompt the user. However, this is not yet supported by all browsers​. When this event returns (or sets the  The onbeforeunload property of the WindowEventHandlers mixin is the EventHandler for processing beforeunload events. These events fire when a window is about to unload its resources. At this point, the document is still visible and the event is still cancelable.

Unfortunately kangax's answer doesn't work for Safari on iOS. In my testing beforeunload was supported in every browser I tried exactly except Safari on IOS :-(

Instead I suggest a different approach:

The idea is simple. On the very first page visit, we don't actually know yet if beforeunload is supported. But on that very first page, we set up both an unload and a beforeunload handler. If the beforeunload handler fires, we set a flag saying that beforeunload is supported (actually beforeunloadSupported = "yes"). When the unload handler fires, if the flag hasn't been set, we set the flag that beforeunload is not supported.

In the following we'll use localStorage ( supported in all the browsers I care about - see http://caniuse.com/namevalue-storage ) to get/set the flag. We could just as well have used a cookie, but I chose localStorage because there is no reason to send this information to the web server at every request. We just need a flag that survives page reloads. Once we've detected it once, it'll stay detected forever.

With this, you can now call isBeforeunloadSupported() and it will tell you.

(function($) {
    var field = 'beforeunloadSupported';
    if (window.localStorage &&
        window.localStorage.getItem &&
        window.localStorage.setItem &&
        ! window.localStorage.getItem(field)) {
        $(window).on('beforeunload', function () {
            window.localStorage.setItem(field, 'yes');
        });
        $(window).on('unload', function () {
            // If unload fires, and beforeunload hasn't set the field,
            // then beforeunload didn't fire and is therefore not
            // supported (cough * iPad * cough)
            if (! window.localStorage.getItem(field)) {
                window.localStorage.setItem(field, 'no');
            }
        });
    }
    window.isBeforeunloadSupported = function () {
        if (window.localStorage &&
            window.localStorage.getItem &&
            window.localStorage.getItem(field) &&
            window.localStorage.getItem(field) == "yes" ) {
            return true;
        } else {
            return false;
        }
    }
})(jQuery);

Here is a full jsfiddle with example usage.

Note that it will only have been detected on the second or any subsequent page loads on your site. If it is important to you to have it working on the very first page too, you could load an iframe on that page with a src attribute pointing to a page on the same domain with the detection here, make sure it has loaded and then remove it. That should ensure that the detection has been done so isBeforeunloadSupported() works even on the first page. But I didn't need that so I didn't put that in my demo.

onbeforeunload Event, The numbers in the table specify the first browser version that fully supports the event. Event. onbeforeunload, Yes, Yes, Yes, Yes, 15.0  Hi, I need to warn the user when he clicks on the close button of an aspx page. And I'm using onbeforeunload event for that. But I don't want to show this message when user changes the compatabilit

I realize I'm a bit late on this one, but I am dealing with this now, and I was thinking that something more like the following would be easier and more reliable. This is jQuery specific, but it should work with any system that allows you to bind and unbind events.

$(window).bind('unload', function(){
    alert('unload event');
});

window.onbeforeunload = function(){
    $(window).unbind('unload');
    return 'beforeunload event';
}

This should unbind the unload event if the beforeunload event fires. Otherwise it will simply fire the unload.

"beforeunload" support detection - JSFiddle, Testing for beforeunload support *. 3. ​. 4. Not all browsers support beforeunload :-( In fact,. 5. quirksmode, the most reliable source for cross-browser. 6. onBeforeUnload Event - Detecting the Cancel How do I detect if the cancel button has been clicked on the dialog box generated by the unBeforeUnload event. I'll cover the following topics in the code samples below: JavaScript OnBeforeUnload Event Detecting, Onbeforeunload Event, and Cancel Button.

alert('onbeforeunload' in window);

Alerts 'true' if onbeforeunload is a property of window (even if it is null).

This should do the same thing:

var supportsOnbeforeunload = false;
for (var prop in window) {
    if (prop === 'onbeforeunload') {
    supportsOnbeforeunload = true;
    break;
    }
}
alert(supportsOnbeforeunload);

Lastly:

alert(typeof window.onbeforeunload != 'undefined');

Again, typeof window.onbeforeunload appears to be 'object', even if it currently has the value null, so this works.

.unload(), Support the JS Foundation In practical usage, behavior should be tested on all supported browsers and contrasted with the similar beforeunload event. The onbeforeunload event occurs when the document is about to be unloaded. This event allows you to display a message in a confirmation dialog box to inform the user whether he/she wants to stay or leave the current page. Note : This only works in Internet Explorer.

Cruster,

The "beforeunload" is not defined in the DOM-Events specification, this is a IE-specific feature. I think it was created in order to enable execution to be triggered before standard "unload" event. In other then IE browsers you could make use of capture-phase "unload" event listener thus getting code executed before for example an inline body onunload event.

Also, DOM doesn't offer any interfaces to test its support for a specific event, you can only test for support of an events group (MouseEvents, MutationEvents etc.)

Meanwhile you can also refer to DOM-Events specification http://www.w3.org/TR/DOM-Level-3-Events/events.html (unfortunately not supported in IE)

Hope this information helps some

Can I use Support tables for HTML5, CSS3, etc, Detected your country as "U.S.A.". Would you like to import Support data for this feature provided by: MDN browser-compat-data. BeforeUnloadEvent  And when any promise finishes, we detect if there's no more work at all— and hide the spinner if pendingOps is empty. I'm not a UX designer, so building a visually appealing busy spinner is a UX exercise left for the reader! 👩‍🎨 Pending Forms But what about for the example above- a pending form? There's two options here.

onbeforeunload event, The onbeforeunload event is not cancelable, because of security reasons, but if an event and attachEvent methods (only Safari and Google Chrome support it). This example uses the onbeforeunload attribute of the body element to detect  The beforeunload event is fired when the window, the document and its resources are about to be unloaded. The document is still visible and the event is still cancelable at this point. Event handler property. This event enables a web page to trigger a confirmation dialog asking the user if they really want to leave the page. If the user

Browser close event in javascript chrome, Using JavaScript onbeforeunload event, you can detect browser or tab close event TestComplete detects these dialogs in all the supported web browsers and  WICKET-5517 Added support for detection of IE11 in Wicket.Browser.isIE() and update references to Wicket.Browser.isIE() #69 Closed niesink wants to merge 426 commits into apache : master from niesink : wicket-6.x

How to detect browser or tab closing in JavaScript ?, The beforeunload event is fired just before the windows and its resources are to However, older browsers may not support this method and a legacy method is​  javascript - onbeforeunload support detection . I'd like to check if the current browser supports the onbeforeunload event. The common javascript way to do this does

Comments
  • Is the site that's linked to above down? Doesn't work for me but I found a cached version.
  • Warning: I wrote a comment on @kangax's page specifically about onbeforeunload being detected as supported on Mobile Safari even though it actually doesn't work reliably.
  • almost works fine in IE, Opera and Safari, but FF gives me false, which does not seem to be correct
  • Sorry, I thought it was working reliably because I didn't realize Firefox supported onbeforeunload.
  • Firefox doesn’t support that kind of inference, but allows to detect "beforeunload" be setting corresponding attribute on an element. var el = document.createElement('div'); el.setAttribute('onbeforeunload', ''); typeof el.onbeforeunload; // "function"
  • This didnt work for me in iOS Safari. It will say the beforeunload event is supported even if it is not
  • Thanks buddy, but this is just all theory - see other answers to this questions and you'll find almost perfect solutions. So, I really don't care if DOM does offer some interface or not. In reality, there are reliable ways how to check it, that's important. Oh, btw., only Opera lacks the support.
  • what browser are you testing this against?
  • all of them, IE, Opera, Safari, Firefox your code does not work in any browser if(typeof window.onbeforeunload != 'undefined') is close, but fails in FF
  • onbeforeunload is always set to null by default. If you set a onbeforeunload function it will always be a function. That doesn't mean it's going to be triggered. I don't what you tested, but that won't work. The only way here is iOS device detection or Peter V. Mørch's method.