Share JavaScript get web page shutdown and cancel Shutdown event

Source: Internet
Author: User

  This article mainly introduces the JavaScript to get the page off and cancel the shutdown event, a friend in need can refer to the

When doing web development, we often use the page shutdown Event onbeforeunload, can give the user a choice to give up the opportunity to shut down, such as the blog editor. If the user chooses to leave, then the OnUnload event will naturally trigger, but if the user chooses to cancel, how to detect?   We assume that a page leaves the cancellation event, called Onunloadcancel. Obviously, this event should be triggered after the user presses the Cancel button of the dialog box. However, the triggering process for closing the prompt dialog box is not that simple. Let's review this process first:     code as follows: Window.onbeforeunload = function () {    return "really leave?";}       The onbeforeunload event triggers when the user prepares to leave the page (for example, by pressing the close button, or refreshing the page, and so on). Our script cannot decide in this event whether to prevent the page from shutting down, the only thing that can be done is to return a string, which appears only as descriptive text in the Close selection dialog box, and the user can choose to close or not close. But we don't know which one to choose.   But careful analysis of this problem is not. If the user really chooses to close the page, then all the running code will be Byebye, and continue to stay on the page, when nothing happened, except the onbeforeunload event. So, we do a little trick in the onbeforeunload incident, register a few milliseconds after the timer started, if the page is really closed, then the timer is void, of course, then the page is still, a few milliseconds delay for this is asynchronous interface interaction events also have no error.     Code as follows: <script language= "JavaScript" > window.onbeforeunload = function () {    settimeout ( Onunloadcancel, 10);     Return "really leave?" Window.onunloadcancel = function () {    alert ("Cancel Departure"); </script>   We use settimeout, delay 10ms execution ONUNL Oadcancel. If the page really closes, the timer is destroyed; But in the test, the discoveryFirefox has two bugs:   Sometimes presses the close button and executes Onunloadcancel, and a dialog box flashes. If you change to a while (1), the browser will always die, which means that Onunloadcancel did it, but destroyed the interface, but did not pause the script's operation. If you leave by refreshing the page, perform a onbeforeunload only once, but by clicking the X button to close the page, you will perform the onbeforeunload two times. So we need to be perfected in order to be compatible with FF.     Code as follows: <script language= "JavaScript" > var _t; Window.onbeforeunload = function () {    settimeout (function () {_t = settimeout (onunloadcancel, 0)}, 0);   & nbsp Return "really leave?" } Window.onunloadcancel = function () {    cleartimeout (_t);     Alert ("Cancel Departure");} </script> &nbs P   Here is a way I can not say why, should be regarded as hack, solve the bug under FF.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.