Does window.onbeforeunload()
fire in all browsers? I need a onbeforeunload functionality which is supported at least by IE6 and FF3.6.
For IE, onbeforeunload()
seems only to be supported by IE9
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. The default message that appears in the confirmation box, is different in different browsers.
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. This event enables a web page to trigger a confirmation dialog asking the user if they really want to leave the page.
Cancelable: The beforeunload event can be canceled by user interaction: // by https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload#Example window. addEventListener("beforeunload", function(event) { event. preventDefault(); // Cancel the event as stated by the standard.
7 Answers. Show activity on this post. A quick note (since this is an old answer) - these days all major browsers don't support custom message in the beforeunload popup. There is no new way to do this.
I found a workaround for Firefox with setTimeout
function because it does not have the same behaviour as other web browsers.
window.onbeforeunload = function (e) { var message = "Are you sure ?"; var firefox = /Firefox[\/\s](\d+)/.test(navigator.userAgent); if (firefox) { //Add custom dialog //Firefox does not accept window.showModalDialog(), window.alert(), window.confirm(), and window.prompt() furthermore var dialog = document.createElement("div"); document.body.appendChild(dialog); dialog.id = "dialog"; dialog.style.visibility = "hidden"; dialog.innerHTML = message; var left = document.body.clientWidth / 2 - dialog.clientWidth / 2; dialog.style.left = left + "px"; dialog.style.visibility = "visible"; var shadow = document.createElement("div"); document.body.appendChild(shadow); shadow.id = "shadow"; //tip with setTimeout setTimeout(function () { document.body.removeChild(document.getElementById("dialog")); document.body.removeChild(document.getElementById("shadow")); }, 0); } return message; }
GitHub: https://github.com/Aelios/crossbrowser-onbeforeunload
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With