Share JavaScript to get the webpage closing and canceling closing events

Share JavaScript to get the webpage closing and canceling closing events

This article mainly introduces how to use JavaScript to get the website closing and canceling the closing events. If you need it, refer to it.

During Web development, we often use the page Close event onbeforeunload to give users a chance to stop the event, such as this blog editor. If you choose to exit, the onunload Event will naturally be triggered. But if you choose to cancel, how can we detect it?

 

Assume that a page exit cancellation event is called onunloadcancel. Obviously, this event should be triggered after the user presses the cancel button in the dialog box. However, it is not that simple to close the trigger process of the prompt dialog box. Let's first review this process:

 

The Code is as follows:

Window. onbeforeunload = function ()

{

Return "are you sure you want to leave? ";

}

 

 

 

The onbeforeunload event is triggered when the user is about to leave the page (such as pressing the close button or refreshing the page. Our script cannot determine whether to block page closure in this event. The only thing that can be done is to return a string, which is only used as the description text in the close selection dialog box, you can choose to disable it or not. But we have no idea which one to choose.

 

However, if you carefully analyze the problem, it is actually not the case. If the user chooses to close the page, all the subsequent running code will be byebye. If the user stays on the page, nothing will happen, except the onbeforeunload event. Therefore, we can do some tricks in the onbeforeunload event to register a timer that will be started several milliseconds later. If the page is actually closed, the timer will certainly be voided; the page is still there, and the latency of several milliseconds is no error for this originally asynchronous interface interaction event.

 

The Code is as follows:

<Script language = "JavaScript">

Window. onbeforeunload = function ()

{

SetTimeout (onunloadcancel, 10 );

Return "are you sure you want to leave? ";

}

Window. onunloadcancel = function ()

{

Alert ("cancel leaving ");

}

</Script>

 

We use setTimeout to execute onunloadcancel with a latency of 10 ms. If the page is closed, the timer will be destroyed. Otherwise, the timer will continue. However, during the test, we found that FireFox has two bugs:

 

Sometimes, when you press the close button, onunloadcancel will be executed and a dialog box will pop up. If it is changed to while (1), the browser will remain stuck. This indicates that onunloadcancel is indeed executed, but the interface is destroyed, but the script is not paused.

If you exit by refreshing the page, only onbeforeunload is executed once, but you click the X button to close the page, onbeforeunload will be executed twice. Therefore, we still need to improve to be compatible with FF.

 

The Code is as follows:

<Script language = "JavaScript">

Var _ t;

Window. onbeforeunload = function ()

{

SetTimeout (function () {_ t = setTimeout (onunloadcancel, 0)}, 0 );

Return "are you sure you want to leave? ";

}

Window. onunloadcancel = function ()

{

ClearTimeout (_ t );

Alert ("cancel leaving ");

}

</Script>

 

 

Here I used a method that I could not tell the cause. It should be regarded as hack and solved the bug in FF.