Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

beforeunload Or onbeforeunload

Tags:

I'm stuck working out which one of these I should be using: beforeunload or onbeforeunload They both seem to be doing very similar things, but with different browser compatibility.

Some context:

I have a form. On page load I serialise the form and save it in a variable. If the user leaves the page I serialise the form and compare the two, to see if there's been any changes. However, if the form is submitted then the event should not be fired.

Example 1

I have this working as expected. I just don't understand the differences between the two:

window.onbeforeunload = function(e) {     if(strOnloadForm != strUnloadForm)         return "You have unsaved changes."; } 

With this line to stop it firing when you save the form (bound to .submit())

window.onbeforeunload = null; 

Example 2

window.addEventListener("beforeunload", function( event ) {     if(strOnloadForm != strUnloadForm)         event.returnValue = "You have unsaved changes."; }); 

With this line to stop it firing when you save the form (bound to .submit())

window.removeEventListener("beforeunload"); 

What the documentation says

I've read the documentation for onbeforeunload and beforeunload. Under the onbeforeunload section Notes it states:

You can and should handle this event through window.addEventListener() and the beforeunload event. More documentation is available there.1

Which makes me think I should be using the latter. However the documentation for removeEventHandler says this:

addEventListener() and removeEventListener() are not present in older browsers. You can work around this by inserting the following code at the beginning of your scripts, allowing use of addEventListener() and removeEventListener() in implementations which do not natively support it.2

Could somebody please shed some light on the differences for these please, and the best one to use?


1https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#Notes2https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener#Polyfill_to_support_older_browsers

like image 644
Adam Tomat Avatar asked Nov 15 '13 12:11

Adam Tomat


People also ask

What is the difference between Onbeforeunload and Onunload?

onbeforeunload Below are my findings on the iPad; Using window. onunload , I am able to get an alert when user navigates to a different page from myPage. html (either by clicking on some link or doing a Google search while on myPage.

What is Onbeforeunload?

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.

What triggers Beforeunload?

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.


1 Answers

window.onbeforeunload = function () {/**/} will override any existing handlers and replace it with your own.

window.addEventListener("beforeunload", function () {/**/}); will add a new handler.

addEventListener is far preferred. In older browsers (that is: IE6 maybe IE7) you can use attachEvent.

You'll commonly see code like:

function addEvent(object, event_type, event_handler) {     if (object.addEventListener) {         object.addEventListener(event_type, event_handler, false);     } else {         object.attachEvent("on" + event_type, handler);     } } 
like image 154
Halcyon Avatar answered Nov 03 '22 08:11

Halcyon