Home > Developer > JavaScript
In the recent project, I need to do a time, that is, when the user leaves the page, I need to cache part of the content of the page, but I do not need users to refresh the time also cached, I just hope that when my users leave
Execute this function. Baidu, there are onbeforeunload and onunload these two events, but onbeforeunload in the user refresh time will also be executed. I've been doing this for a long time, so I want to make a little summary here.
onBeforeUnload and OnUnload Events
onbeforeunload Definitions and 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 to leave the current page.
The default message for the dialog box is different 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 be displayed with the standard Information in the dialog box.
Note: If you do not specify the onbeforeunload event on the <body> element, you need to add the event on the Window object and use the ReturnValue property to create the custom information (see the following syntax instance).
Note: In the Firefox browser, only the default reminder message is displayed (no custom information is displayed).
How to use:
<! DOCTYPE html>
Or:
<! DOCTYPE html>
When the event is triggered, a confirmation and Cancellation dialog box is displayed, the page is determined to leave, and the cancellation continues on this page. Of course you can customize the hint text.
So, what do I do when I just need to execute this function while I'm away, and not execute when I refresh?
Window.onbeforeunload = function () {
var n = window.event.screenx-window.screenleft;
var b = n > document.documentelement.scrollwidth-20;
if (!) ( b && Window.event.clientY < 0 | | Window.event.altKey)) {
//window.event.returnvalue = "Do you really want to refresh the page?" ";
Here's where I want to execute the cached code
cachefunction ();
}
In this way, when I leave the page, I can execute my cached code without popping the prompt box, and I will not eject the prompt box or execute it when I refresh. It is worth mentioning, this time, to the Ajax set to sync, that is: Ajax inside the async change to: false;
Browser compatibility
IE, Chrome, Safari perfect support
Firefox does not support text reminder information
Opera does not support
Ie6,ie7 Bugs encountered with onbeforeunload
2, onunload definition and usage
The OnUnload event occurs when the user exits the page.
The use method is similar to onbeforeunload
Window.onunload = function () {return
"Are you sure you want to leave?"
}
Browser compatibility
Refresh the page in Ie6,ie7,ie8, close the browser, after the page jump will be executed;
IE9 Refresh page will execute, page jump, closed browser can not be executed;
Firefox (including firefox3.6) after closing the label, after the page jump, refresh the page can be executed, but closed browser can not be executed;
Safari refreshes the page, the page jumps and executes, but the browser does not execute;
Opera and Chrome are not implemented in any case.
Summarize
Onunload,onbeforeunload are called at refresh or shutdown, and can be specified in <script> scripts by window.onunload or in <body>. The difference is that onbeforeunload executes before onunload, and it can also prevent onunload from executing.
onBeforeUnload is also invoked 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 not able to prevent pages from being updated and closed. And onbeforeunload can do it.
Perform onload when page load only
When the page is closed, the onbeforeunload is executed first, the last OnUnload
page refresh is performed onbeforeunload, then onunload, and finally onload.
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
