Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Difference between onbeforeunload and onunload

What are the differences between onbeforeunload and onunload ? Also I have a specific question related to it's use on the iPad...I have a page (myPage.html) where I am trying to show an alert when the page is closed (i.e. X is pressed to close the tab on iPad)

Now I tried using both window.onunload and window.onbeforeunload Below are my findings on the iPad;

  1. 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.html) . However nothing happens when the tab is closed from the minimized view (X)

  2. Using window.onbeforeunload, I neither get an alert even if the user navigates to a different page from myPage.html OR if he closes the tab (X) from the minimized view.

I wanted to know if there is any alternate way to fix this issue ?

Thank you.

like image 830
copenndthagen Avatar asked Aug 01 '11 07:08

copenndthagen


People also ask

What is the difference between Onbeforeunload and Onunload?

Prototype: Whereas unload is a normal event that inherits from Event , beforeunload has its own prototype, BeforeUnloadEvent .

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 is Onunload?

onunload occurs when the user navigates away from the page (by clicking on a link, submitting a form, closing the browser window, etc.). Note: The onunload event is also triggered when a user reloads the page (and the onload event).

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.


2 Answers

onunload is responsible for executing an instruction when the page is closed. It also causes issue with IE and AJAX.

onbeforeunload is more efficient because it does not run in competition with the actual closing of the window and is triggered before onunload

I know Opera used to not acknowledge onbeforeunload - not sure if they've fixed that, but I always register the listener for both to be safe:

window.onunload = window.onbeforeunload = (function(){... 
like image 181
AlienWebguy Avatar answered Oct 06 '22 07:10

AlienWebguy


Adding with AlienWebguy's ans, to avoid dual calls at the browsers that support both events,

var onBeforeUnLoadEvent = false;  window.onunload = window.onbeforeunload= function(){ if(!onBeforeUnLoadEvent){   onBeforeUnLoadEvent = true;   //your code here   } }; 
like image 31
Jeyan Avatar answered Oct 06 '22 08:10

Jeyan