Home > Developer > Web Develop
Do you often see a cue box that determines whether to leave the current page when you close the page? Think of some on-line test system, information entry system, etc. will often have these tips, to avoid users intentionally or inadvertently shut down the page, resulting in data loss. This implementation is simple, taking advantage of the onunload and onBeforeUnload methods in the HTML DOM event.
Unload Event PropertiesDefinition: Executes a piece of JavaScript when the user unloads a document, for example:
Body
<body onunload= "Goodbye ()" >
Window
window.onbeforeunload=function (e) {
var e = window.event| | E
E.returnvalue= ("OK to leave the current page?") ");
}
Usage: The Unload event occurs when the user leaves the page. Note: If you reload the page, the Unload event (as well as the OnLoad event) is also triggered.
Triggered at:
Definition: Executes JavaScript when it is about to leave the current page (refresh or close), for example:
Body
<body onbeforeunload= "Goodbye ()" >
Window
window.onbeforeunload=function (e) {
var e = window.event| | E
E.returnvalue= ("OK to leave the current page?") ");
}
Usage: The onbeforeunload event is triggered when it is about to leave the current page (refresh or close). This event can be used to pop up a dialog box that prompts the user to continue browsing the page or leave the current page. The default message for the dialog box differs depending on the browser, and the standard information is similar to "Are you sure you want to leave this page?" "。 This information cannot be deleted. But you can customize some message prompts to appear in the dialog box along with the standard information. Note: In the Firefox browser, only the default reminder message (No custom information is displayed) is displayed.
Triggered at:
These two event properties are currently supported by mainstream browsers
OverviewOnunload,onbeforeunload are called when they are refreshed or closed, and can be specified in the <script> script by Window.onunload or in <body>. The difference is that onbeforeunload is executed before onunload, and it can also prevent onunload execution. onBeforeUnload is also called when the page is refreshed or closed, onbeforeunload is about to go to the server to read the new page when the call is not started, and OnUnload has read from the server to load the new page, Called when the current page is about to be replaced. OnUnload is unable to prevent the page from being updated and closed, and onbeforeunload can do so.
Report:
Only OnLoad is executed when the page is loaded
When the page closes, the onbeforeunload is executed first, and the last OnUnload
The page refreshes with onbeforeunload first, then OnUnload, and the last onload
Attached section:
The code that binds the body tag:
<! DOCTYPE html>Google Chrome under the effect:Click the Refresh button:
Click the Back button:
Go to a different interface via the taskbar or the Favorites folder:
Close the page:
Effects under Edge:Click the Refresh button:
Click the Back button:
Close the page:
Note: In the new version of Mozilla Firefox (I am using: 57.0) Inside, this writing does not take effect?!
The code that binds the Window object:
<! DOCTYPE html>The effect of Firefox:Click the Refresh button:
Click the Back button:
Close the page:
Note: This method in Google browsing, Edge browser still applies, the effect is the same as the first!
"Go" JS Monitor browser left page operation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
