In recent projects, 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 don’t need the user to refresh it, I just want to cache it when my user leaves
Execute this function. On Baidu, there are two events: onbeforeunload and onunload, but onbeforeunload will also be executed when the user refreshes. I've been doing it for a long time, so I want to make a small summary here
onbeforeunload and onunload events
onbeforeunload definition and usage
The onbeforeunload event is fired 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 whether to continue browsing the page or leave the current page.
The default prompt information of the dialog box varies according to different browsers, 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 in the dialog box along with standard information.
Note: If you do not specify the onbeforeunload event on the <body> element, you need to add the event on the window object and create custom information using the returnValue property (see the following syntax example).
Note: In Firefox browser, only default reminder messages are displayed (no custom messages are displayed).
How to use:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body onbeforeunload="return test()">
</body>
<script type="text/javascript">
function test(){
return "Are you sure you want to leave?";
}
</script>
</html>
or:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
</body>
<script type="text/javascript">
=function(){
return "Are you sure you want to leave?";
}
</script>
</html>
When the event is triggered, a dialog box with confirmation and cancel will pop up. If it is confirmed, it will leave the page, and if it is canceled, it will continue to stay on this page. Of course you can customize the prompt text.
So, when I just need to execute this function when I leave and not when refreshing, what should I do?
= function() {
var n = - ;
var b = n > - 20;
if (!(b && < 0 || )) {
// = "Do you really want to refresh the page?";
//Place the code I want to execute cached cacheFunction();
}
}
In this way, when I leave the page, I can execute my cached code without popping up the prompt box, and when I refresh, I don’t pop up the prompt box, nor do I execute it. When it is worth mentioning, at this time, ajax should be set to synchronous, that is, change the async in ajax to: false;
Browser compatibility
IE, Chrome, Safari perfect support
Firefox does not support text reminder messages
Opera does not support it
IE6, IE7 bug encountered using onbeforeunload
2. Onunload definition and usage
The onunload event occurs when the user exits the page.
How to use it is similar to onbeforeunload
= function(){
return "Are you sure you want to leave?"
}
Browser compatibility
In IE6, IE7, IE8, it will be executed after refreshing the page, closing the browser, and after the page jumps;
IE9 refresh the page and will execute it, but the page jumps or closes the browser cannot be executed;
firefox (including firefox3.6) can be executed after closing the tag, after page jump, and after page refresh, but cannot be executed after closing the browser;
Safari will execute after refreshing the page and jumping the page, but it cannot be executed after closing the browser;
Opera or Chrome will not execute any situation.
Summarize
Onunload and onbeforeunload are both called when refreshing or closing. They can be specified in the <script> script or in the <body>. The difference is that onbeforeunload is executed before onunload, it can also prevent the execution of onunload.
Onbeforeunload is also called when the page is refreshed or closed. Onbeforeunload is called when it is about to go to the server to read a new page, but it has not started to read it yet. Onunload has read the new page that needs to be loaded from the server, and is called when the current page is about to be replaced. Onunload cannot prevent page updates and closings. And Onbeforeunload can do it.
Only onload is executed when the page is loaded
When the page is closed, execute onbeforeunload first, and finally onunload
When the page is refreshed, first execute onbeforeunload, then onunload, and finally onload.