Home>

The onbeforeunload and onunload events in JavaScript are functions of the two functions before the page is loaded and when the page is closed.It can prevent the prompt from being refreshed when the page is refreshed or the page is closed,Let me introduce the onbeforeunload and onunload event usage.

In recent projects,Need to do it for a while,When the user leaves the page,I need to cache part of the page,But I don't need to cache when the user refreshes,I only want when my users leave

Execute this function.Baidu has two events, onbeforeunload and onunload.But onbeforeunload is also executed when the user refreshes.It took me a long time,So I want to make a small summary here

onbeforeunload and onunload events

onbeforeunload definition and usage

The onbeforeunload event fires when the current page is about to leave (refresh or close).

This event can be used to pop up dialog boxes,Prompts the user to continue browsing the page or leave the current page.

The default prompt information of the dialog box varies according to different browsers.The standard message is something like "Are you sure i 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 theelement, you need to add an event on the window object,And use the returnvalue attribute to create custom information (see the syntax example below).

Note:In firefox browser,Show only default reminder messages (do not display custom messages).

Instructions:

<! 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 i 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">
window.onbeforeunload=function () {
  return "Are you sure i want to leave";
}
</script>
</html>

When the event is triggered, a dialog box with confirmation and cancellation pops up.OK to leave the page,Cancel will stay on this page.Of course you can customize the prompt text.

So, when I only need to execute this function when I leave,It is not executed during refresh,How do you do that?

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?";
      //Place the code where I want to execute the cache
      cachefunction ();
    }
 }

This way, when I leave the page,Can execute my cache code,Without popping up a prompt box,I do n’t even get a prompt when I refresh,Nor does it.When it is worth mentioning,at this time,To set ajax to sync,That is:async in ajax is changed to:false;

Browser compatibility

ie, chrome, safari perfectly supported

firefox does not support text reminders

opera is not supported

ie6, ie7 bug encountered using onbeforeunload

2, onunload definition and usage

The onunload event occurs when the user exits the page.

Use method is similar to onbeforeunload

window.onunload=function () {
  return "Are you sure i want to leave"
}

Browser compatibility

ie6, ie7, ie8 will be executed after refreshing the page, closing the browser, and after the page jumps;

ie9 will be executed when the page is refreshed, but cannot be executed when the page is redirected or the browser is closed;

firefox (including firefox3.6) can be executed after closing the tab, after the page jumps, after the page is refreshed,But closing the browser cannot be executed;

safari will be executed after refreshing the page and page jump,But closing the browser cannot be executed;

Opera, chrome will not be executed under any circumstances.

to sum up

onunload, onbeforeunload are called when refreshing or closing,Can be specified in the "script" script through window.onunload 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 the server is about to read a new page,Reading has not started at this time;And onunload has read from the server a new page that needs to be loaded,Called when the current page is about to be replaced.onunload cannot prevent the page from being updated and closed.And onbeforeunload can do it.

Perform only onload when the page loads

When the page is closed, first execute onbeforeunload and finally onunload

When the page refreshes, first execute onbeforeunload, then onunload, and finally onload.