Use JS to determine how the page is refreshed or closed

Source: Internet
Author: User

onBeforeUnload and OnUnload Events

Onunload,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 it.

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 finally onload.

1. onbeforeunload Event:
Description: At present, the three major mainstream browsers Firefox and IE both support the onbeforeunload event, Opera has not yet supported.
Usage:
Object.onbeforeunload = Handler
<element onbeforeunload = "Handler" ... ></element>
Describe:
When the event is triggered, a dialog box with OK and cancel is popped up, and then the page is left, and the cancellation continues on this page. Handler can set a return value as the display text for the dialog box.

Triggered at:
• Close the browser window
• When you go to another page by using the Address bar or favorite folder
• Click Back, go ahead, refresh, home page one of the time
• Click on a URL to the other page to connect
• When invoking any of the following events: Click,document write,document open,document close,window Close, window navigate, window Navigateandfind , location replace,location Reload,form submit.
• When you open a page with window open and pass the name of the window on this page to the page you want to open.
• When the value of Location.href is re-assigned.
• When submitting a form with the specified action via the input type= "submit" button.
Can be used in the following elements:
· BODY, FRAMESET, window
Platform Support:
Ie4+/win, Mozilla 1.7a+, Netscape 7.2+, firefox0.9+
Example:
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>onbeforeunload Test </title>
<script>
function Checkleave () {
Event.returnvalue= "OK to leave the current page?" ";
}
</script>
<body onbeforeunload= "Checkleave ()" >
</body>

2. OnUnload Events
Usage:
Object.onbeforeunload = Handler
<element onbeforeunload = "Handler" ></element>

Describe:
The OnUnload event is triggered when a user closes a page.

Triggered at:
• Close the browser window
• When you go to another page by using the Address bar or favorite folder
• Click Back, go ahead, refresh, home page one of the time
• Click on a URL to the other page to connect
• When invoking any of the following events: Click,document write,document open,document close,window Close, window navigate, window Navigateandfind , location replace,location Reload,form submit.
• When you open a page with window open and pass the name of the window on this page to the page you want to open.
• When the value of Location.href is re-assigned.
• When submitting a form with the specified action via the input type= "submit" button.
Example:
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>onunload Test </title>
<script>
function Checkleave () {
Alert ("Welcome to the next time!") ");
}
</script>
<body onunload= "Checkleave ()" >
</body>

A good way to judge whether a page is really closed or refreshed:

Window.onbeforeunload=function () {
Alert ("===onbeforeunload===");
if (event.clientx>document.body.clientwidth && event.clienty < 0 | | event.altkey) {
Alert ("You closed the browser");
}else{
Alert ("You are refreshing the page");
}
}
This code is to determine the trigger onbeforeunload event, whether the mouse clicked the Close button, or press the ALT+F4 to close the page, if it is, the system is to shut down the Web page, or the system is considered to refresh the page.

Use JS to determine how the page is refreshed or closed

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.