Multiple OnBeforeUnload

Question

I am writing JS which is used as a plugin. JS has an onbeforeunload event.

I want suggestions so that my onbeforeunload event does not override the existing onbeforeunload event (if any). Can I add my onbeforeunload to an existing one?

Thanks.

Answer 1

You only need to take care of this if you are not using event monitoring, but attach your onbeforeunload handler directly (which you do not need). If so, use something similar to avoid overwriting existing handlers.

 (function() { var existingHandler = window.onbeforeunload; window.onbeforeunload = function(event) { if (existingHandler) existingHandler(event); // your own handler code here } })(); 

Unfortunately, you cannot prevent other (later) scripts from overwriting the handler. But again, this can be solved by adding an event listener instead:

 $(window).unload(function(event) { // your handler code here }); 

Answer 2

My idea:

 var callbacks = []; window.onbeforeunload = function() { while (callbacks.length) { var cb = callbacks.shift(); typeof(cb)==="function" && cb(); } } 

and

 callbacks.push(function() { console.log("callback"); }); 

Answer 3

If you contact using jQuery, it will add a binding to the existing list, so there is no need to worry.

From the jQuery Docs on () method :

As in jQuery 1.4, the same event handler can be bound to an element several times.

 function greet(event) { alert("Hello "+event.data.name); } $("button").on("beforeunload", { name: "Karl" }, greet); $("button").on("beforeunload", { name: "Addy" }, greet); 

Answer 4

Try the following:

 var f = window.onbeforeunload; window.onbeforeunload = function () { f(); /* New code or functions */ } 

You can change this function many times without losing any other functions.

Answer 5

You can use various javascript frameworks such as jquery, or perhaps you can add a small event adding handler for this. Just as you have an object that contains a series of functions that you added, and then in the upload, you run additional functions. Therefore, when you want to add a new function to an event, you add it to your object.

something like that:

 var unloadMethods = []; function addOnBeforeUnloadEvent(newEvent) { //new Event is a function unloadMethods[unloadMethods.length] = newEvent; } window.onbeforeunload = function() { for (var i=0; i<unloadMethods.length; i++) { if(typeof unloadMethods[i] === "function") {unloadMethods[i]();} } } 

Answer 6

In the mentioned usage framework addEventListener is used internally. If you do not use the framework, use it.

https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener

For older versions of IE, you should use a backup to use attachEvent:

http://msdn.microsoft.com/en-us/library/ie/ms536343(v=vs.85).aspx

Answer 7

I liked the Marius solution, but embellished it to satisfy situations where var f is null and return the first line returned by any function in the chain:

 function eventBeforeUnload(nextFN){ //some browsers do not support methods in eventAdd above to handle window.onbeforeunload //so this is a way of attaching more than one event listener by chaining the functions together //The onbeforeunload expects a string as a return, and will pop its own dialog - this is browser behavior that can't //be overridden to prevent sites stopping you from leaving. Some browsers ignore this text and show their own message. var firstFN = window.onbeforeunload; window.onbeforeunload = function () { var x; if (firstFN) { //see if the first function returns something x = firstFN(); //if it does, return that if (x) return x; } //return whatever is returned from the next function in the chain return nextFN(); } } 

In your code where you want to use it as such

 eventBeforeUnload(myFunction); //or eventBeforeUnload(function(){if(whatever) return 'unsaved data';);