Home > Article > Web Front-end > How to use js to determine whether the page is refreshed or closed (onbeforeunload and onunload events)_javascript skills

How to use js to determine whether the page is refreshed or closed (onbeforeunload and onunload events)_javascript skills

WBOYOriginal: 2016-05-16 17:52:181347browse

Onunload and onbeforeunload are called when refreshing or closing. They can be specified through window.onunload in the <script> script or specified in <body>. The difference is that onbeforeunload is executed before onunload, and it can also prevent the execution of onunload. Onbeforeunload is also called when the page is refreshed or closed. Onbeforeunload is called when going to the server to read a new page, but it has not yet started reading; while onunload has read the new page that needs to be loaded from the server. 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. Onload is executed only when the page is loaded. Onbeforeunload is executed first when the page is closed, and onunload is finally executed. Onbeforeunload is executed first, then onunload, and finally onload is executed when the page is refreshed. 1. onbeforeunload event: Description: Firefox and IE currently support the onbeforeunload event in the three major mainstream browsers, but Opera does not yet support it. Usage: ·Object.onbeforeunload = handler ·<element onbeforeunload = “handler” … ></element> Description: When the event is triggered, a message pops up with confirmation and cancel the dialog box. If you confirm, you will leave the page. If you cancel, you will continue to stay on this page. The handler can set a return value as the displayed text of the dialog box. Triggered by: ·Close the browser window ·When going to other pages through the address bar or favorites ·When you click one of the return, forward, refresh, and homepages ·When clicking a url link that goes to other pages ·When calling 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 using window open to open a page and pass the name of the window on this page to the page to be opened. 　·When reassigning the value of location.href. 　·When submitting a form with a specified action through 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: <div class="codetitle"> <a style="CURSOR: pointer" data="88705" class="copybut" id="copybut88705" onclick="doCopy('code88705')">Copy code</a> The code is as follows:</div> <div class="codebody" id="code88705"> 　<html xmlns="http://www.w3.org/ 1999/xhtml"> 　<head> 　<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 　<title>onbeforeunload Test</title> 　<script> 　function checkLeave(){ 　event.returnValue="Are you sure 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 by:
·Close the browser window
·When going to other pages through the address bar or favorites
·When you click one of the return, forward, refresh, and homepages
·When clicking a url link that goes to other pages
·When calling 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 using window open to open a page and pass the name of the window on this page to the page to be opened.
　·When reassigning the value of location.href.
　·When submitting a form with a specified action through the input type="submit" button.
Example:

Copy code

The code is as follows:

 
　onunload test 
　<script> <br>　function checkLeave(){ <br>　alert("Welcome See you next time! "); <br>　} <br>　</script>

A good way to tell if the page is really closed and refreshed:

Copy code The code is as follows:

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 whether the mouse clicks the close button when the onbeforeunload event is triggered, or presses ALT F4 to close the web page. If so, then It is considered that the system is closing the web page, otherwise it is considered that the system is refreshing the web page.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Regular expression to determine Chinese numbers and letters in js (example)_javascript skillsNext article：Regular expression to determine Chinese numbers and letters in js (example)_javascript skills

See more

How to use js to determine whether the page is refreshed or closed (onbeforeunload and onunload events)_javascript skills

Related articles