Menu
I have a strange issue from a client in that our code, which they include uses onbeforeunload() to trigger a dialog, but they are also including another companies code which also binds this event handler.
Is it possible for both to execute at the same time?
I've been reading this, http://oreilly.com/catalog/9780596101992 "JavaScript: The Definitive Guide, Fifth Edition" to try and help better understand what is happening in the browsers internals and the Javascript stack, but it's proving quite mind bending.
I understand from reading the book that some events can be executed all at the same time if they are attached using the Level 2 API addEventListener() but the order will be up to the browser. However there is no mention of the onbeforeunload() event. Just the onunload().
Which leads me to the second part of the question. If an event is triggered in onbeforeunload() am I right in thinking that unless it returns true, the onunload() will never be called?
If anyone can shed some light on it, or hook me up with a nice tutorial/guide on either having multiple event handlers assigned to the same event, or specifically on these two events that would be ace.
660
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.
The onunload event occurs once a page has unloaded (or the browser window has been closed). onunload occurs when the user navigates away from the page (by clicking on a link, submitting a form, closing the browser window, etc.).
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.
Is it possible for both to execute at the same time?
Not literally at the same time, no — Javascript in browsers is (currently) single-threaded. So there can be multiple handlers for the onbeforeunload event, but they'll be called serially, not simultaneously. At least in theory; in practice, it looks like only one of them is called (see below).
If an event is triggered in onbeforeunload() am I right in thinking that unless it returns true, the onunload() will never be called?
If any onbeforeunload handler cancels the unload, no onunload handler will be called. You cancel the unload by doing two things (because browsers differ here): First, you assign a string to the returnValue property of the event object, and then you return that string out of the function. Details here and here. (The string is used as a prompt, allowing the user to decide whether to cancel the unload.)
So much for theory, let's look at what actually happens:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
font-family: sans-serif;
}
</style>
<script type='text/javascript'>
window.onload = pageInit;
function pageInit() {
hook(window, 'beforeunload', beforeUnload1);
hook(window, 'beforeunload', beforeUnload2);
hook(window, 'unload', unload1);
hook(window, 'unload', unload2);
}
function beforeUnload1(event) {
var s;
event = event || window.event;
s = "Message from beforeUnload1";
event.returnValue = s
return s;
}
function beforeUnload2(event) {
var s;
event = event || window.event;
s = "Message from beforeUnload2";
event.returnValue = s
return s;
}
function unload1(event) {
alert("Message from unload1");
}
function unload2(event) {
alert("Message from unload2");
}
var hook = (function() {
var d;
function hookViaAttachEvent(obj, eventName, handler) {
obj.attachEvent('on' + eventName, handler);
}
function hookViaAddEventListener(obj, eventName, handler) {
obj.addEventListener(eventName, handler, false);
}
d = document.createElement('span');
if (d.addEventListener) {
return hookViaAddEventListener;
}
else if (d.attachEvent) {
return hookViaAttachEvent;
}
throw "Neither attachEvent nor addEventListener found.";
})();
function hook(eventName, handler) {
}
</script>
</head>
<body></body>
</html>
On Chrome, IE, and Firefox, I only ever see a notification from one of the onbeforeunload handlers, even when I say it's okay to go ahead and leave. I expect this is probably because otherwise, a sufficiently-irritating page could just register a bunch of handlers and keep nagging the user to stay on the page.
After the (one) question, if I allow navigation to continue, I get both unload messages.
177
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
