How to Use js to judge whether a page is refreshed or closed (onbeforeunload and onunload events) _ javascript skills

Source: Internet
Author: User
Onunload and onbeforeunload are called during refresh or shutdown. You can use window in the & lt; script & gt; script. onunload to specify or specify Onunload in & lt; body & gt;. onbeforeunload is called during refresh or shutdown. You can use window in script. onunload to specify or. The difference is that onbeforeunload is executed before onunload, which can also stop onunload execution.
Onbeforeunload is also called when the page is refreshed or closed. Onbeforeunload is called when the server is about to read a new page. At this time, it has not started reading; onunload has read the new page to be loaded from the server and is called when the current page is to be replaced. Onunload cannot prevent page updates or closures. Onbeforeunload can be used.

Only onload is executed when the page is loaded.
When the page is closed, run onbeforeunload and then onunload.
When the page is refreshed, execute onbeforeunload first, then onunload, and finally onload.

1. onbeforeunload event:
Note: currently, firefox and IE of the three major browsers support onbeforeunload events, but opera does not.
Usage:
· Object. onbeforeunload = handler
·
Description:
When an event is triggered, a confirmation and cancellation dialog box is displayed. If you are OK, the page is left. If you cancel the event, the page continues to be canceled. Handler can set a return value as the displayed Text of the dialog box.

Triggered on:
· Close the browser window
· When you go to other pages through the address bar or Favorites folder
· Click return, forward, and refresh. When one of the home pages is displayed
· When you click a url to connect to another page
· Call 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 use window open to open a page and pass the window name on this page to the page to open.
· When the location. href value is assigned again.
· When submitting a form with the specified action through the input type = "submit" button.
It can be used in the following elements:
· BODY, FRAMESET, window
Platform support:
IE4 +/Win, Mozilla 1.7a +, Netscape 7.2 +, Firefox0.9 +
Example:

The Code is as follows:


   
   
   
   Onbeforeunload Test
Script
Function checkLeave (){
Event. returnValue = "are you sure you want to leave the current page? ";
}
Script
   
   
   
   


2. onunload Event
Usage:
· Object. onbeforeunload = handler
·

Description:
The onunload Event is triggered when the user closes a page.

Triggered on:
· Close the browser window
· When you go to other pages through the address bar or Favorites folder
· Click return, forward, and refresh. When one of the home pages is displayed
· When you click a url to connect to another page
· Call 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 use window open to open a page and pass the window name on this page to the page to open.
· When the location. href value is assigned again.
· When submitting a form with the specified action through the input type = "submit" button.
Example:

The Code is as follows:


   
   
   
   Onunload Test
Script
Function checkLeave (){
Alert ("welcome to come back next time! ");
}
Script
   
   
   
   


A good way to determine whether the page is actually closed and refreshed:

The Code is as follows:


Window. onbeforeunload = function (){
Alert ("= onbeforeunload = ");
If (event. clientX> document. body. clientWidth & event. clientY <0 | event. altKey ){
Alert ("you disabled the browser ");
} Else {
Alert ("You are refreshing the page ");
}
}


This code is used to determine whether the mouse clicks the close button when the onbeforeunload event is triggered, or if the webpage is closed by pressing ALT + F4. If yes, the system determines that the webpage is closed, otherwise, the system will refresh the webpage.
Related Article

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.