CODEWITHSUNDEEP
javascriptjquery
Jayesh
Jayesh

Reputation: 3951

Multiple OnBeforeUnload

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

I want suggestions so that my onbeforeunload event doesn't override the existing onbeforeunload event (if any). Can I append my onbeforeunload to the existing one?

Thanks.

Upvotes: 14

Views: 11617

Answers (8)

Lunfel
Lunfel

Reputation: 2677

I felt this has not been answered completely, because no examples were shown using addEventListener (but The MAZZTer pointed out the addEventListener solution though). My solution is the same as Julian D. but without using jQuery, only native javascript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Before Unload</title>
</head>
<body>
    <p>Test</p>

    <script>
      window.addEventListener('beforeunload', function (event) {
        console.log('handler 1')
        event.preventDefault()
        event.returnValue = ''
      });

      window.addEventListener('beforeunload', function (event) {
        console.log('handler 2')
      });
    </script>
</body>
</html>

In this example, both listeners will be executed. If any other beforeunload listeners were set, it would not override them. We would get the following output (order is not guaranteed):

handler 1
handler 2

And, importantly, if one or more of the event listener does event.preventDefault(); event.returnValue = '', a prompt asking the user if he really wants to reload will occur.

This can be useful if you are editing a form and at the same time you are downloading a file via ajax and do not want to lose data on any of these action. Each of these could have a listener to prevent page reload.

const editingForm = function (event) {
  console.log('I am preventing losing form data')
  event.preventDefault()
  event.returnValue = ''
}

const preventDownload = function (event) {
  console.log('I am preventing a download')
  event.preventDefault()
  event.returnValue = ''
}

// Add listener when the download starts
window.addEventListener('beforeunload', preventDownload);
// Add listener when the form is being edited
window.addEventListener('beforeunload', editingForm);

// Remove listener when the download ends
window.removeEventListener('beforeunload', preventDownload);
// Remove listener when the form editing ends
window.removeEventListener('beforeunload', editingForm);

Upvotes: 18

Mutation Person
Mutation Person

Reputation: 30498

If you bind using jQuery, it will append the binding to the existing list, so there is no need to worry.

From the jQuery Docs on() method:

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

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

Upvotes: 2

ft525
ft525

Reputation: 61

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");
});

Upvotes: 3

Peter Brand
Peter Brand

Reputation: 624

I liked Marius's solution, but embellished on it to cater for situations where the var f is null, and to return the first string 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 required use it as such

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

Upvotes: 0

The MAZZTer
The MAZZTer

Reputation: 21

Those frameworks mentioned use addEventListener internally. If you are not using a framework, use that.

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

For older versions of IE you should have a fallback to use attachEvent instead:

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

Upvotes: 0

ABM
ABM

Reputation: 19

Try this:

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

You can modify this function many times , without losing other functions.

Upvotes: 2

JohanSellberg
JohanSellberg

Reputation: 2503

You can use different javascript frameworks like jquery or you could probably add a small event add handler to do this. Like you have an object thatcontains a number of functions that you have added and then in the onbefore unload you run the added functions. So when you want to add a new function to the event you add it to your object instead.

something like this:

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]();}
    }
}

Upvotes: 0

Julian D.
Julian D.

Reputation: 5463

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

(function() {
    var existingHandler = window.onbeforeunload;
    window.onbeforeunload = function(event) {
        if (existingHandler) existingHandler(event);

        // your own handler code here
    }
})();

Unfortunately, you can't prevent other (later) scripts to overwrite your handler. But again, this can be solved by adding an event listener instead:

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

Upvotes: 15

Related Questions