用js判斷頁面刷新或關閉的方法(onbeforeunload與onunload事件)

更新時間：2012年06月22日 13:42:13 作者：

Onunload，onbeforeunload都是在刷新或關閉時調(diào)用，可以在<script>腳本中通過window.onunload來指定或者在<body>里指定

Onunload，onbeforeunload都是在刷新或關閉時調(diào)用，可以在<script>腳本中通過window.onunload來指定或者在<body>里指定。區(qū)別在于onbeforeunload在onunload之前執(zhí)行，它還可以阻止onunload的執(zhí)行。
　　Onbeforeunload也是在頁面刷新或關閉時調(diào)用，Onbeforeunload是正要去服務器讀取新的頁面時調(diào)用，此時還沒開始讀??；而onunload則已經(jīng)從服務器上讀到了需要加載的新的頁面，在即將替換掉當前頁面時調(diào)用。Onunload是無法阻止頁面的更新和關閉的。而 Onbeforeunload 可以做到。

頁面加載時只執(zhí)行onload
頁面關閉時先執(zhí)行onbeforeunload，最后onunload
頁面刷新時先執(zhí)行onbeforeunload，然后onunload，最后onload。

1、onbeforeunload事件：
　　說明：目前三大主流瀏覽器中firefox和IE都支持onbeforeunload事件,opera尚未支持。
　　用法：
　　　·object.onbeforeunload = handler
　　　·<element onbeforeunload = “handler” … ></element>
　　描述：
　　　事件觸發(fā)的時候彈出一個有確定和取消的對話框，確定則離開頁面，取消則繼續(xù)待在本頁。handler可以設一個返回值作為該對話框的顯示文本。

　　觸發(fā)于：
　　　·關閉瀏覽器窗口
　　　·通過地址欄或收藏夾前往其他頁面的時候
　　　·點擊返回，前進，刷新，主頁其中一個的時候
　　　·點擊一個前往其他頁面的url連接的時候
　　　·調(diào)用以下任意一個事件的時候：click，document write，document open，document close，window close ，window navigate ，window NavigateAndFind,location replace,location reload,form submit.
　　　·當用window open打開一個頁面，并把本頁的window的名字傳給要打開的頁面的時候。
　　　·重新賦予location.href的值的時候。
　　　·通過input type=”submit”按鈕提交一個具有指定action的表單的時候。
　　可以用在以下元素：
　　　·BODY, FRAMESET, window
　　平臺支持：
　　　IE4+/Win, Mozilla 1.7a+, Netscape 7.2+, Firefox0.9+
　　示例：

復制代碼代碼如下:

 
　　　<html xmlns="http://www.w3.org/1999/xhtml"> 
　　　<head> 
　　　<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
　　　<title>onbeforeunload測試</title> 
　　　<script> 
　　　function checkLeave(){ 
　　　　event.returnValue="確定離開當前頁面嗎？"; 
　　　} 
　　　</script> 
　　　</head> 
　　　<body onbeforeunload="checkLeave()"> 
　　　</body> 
　　　</html> 

2、onunload事件
　　用法：
　　　·object.onbeforeunload = handler
　　　·<element onbeforeunload = "handler"></element>

　　描述：
　　　當用戶關閉一個頁面時觸發(fā) onunload 事件。

　　觸發(fā)于：
　　　·關閉瀏覽器窗口
　　　·通過地址欄或收藏夾前往其他頁面的時候
　　　·點擊返回，前進，刷新，主頁其中一個的時候
　　　·點擊一個前往其他頁面的url連接的時候
　　　·調(diào)用以下任意一個事件的時候：click，document write，document open，document close，window close ，window navigate ，window NavigateAndFind,location replace,location reload,form submit.
　　　·當用window open打開一個頁面，并把本頁的window的名字傳給要打開的頁面的時候。
　　　·重新賦予location.href的值的時候。
　　　·通過input type=”submit”按鈕提交一個具有指定action的表單的時候。
　　示例：

復制代碼代碼如下:

 
　　　<html xmlns="http://www.w3.org/1999/xhtml"> 
　　　<head> 
　　　<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
　　　<title>onunload測試</title> 
　　　<script> 
　　　function checkLeave(){ 
　　　　alert("歡迎下次再來！"); 
　　　} 
　　　</script> 
　　　</head> 
　　　<body onunload="checkLeave()"> 
　　　</body> 
　　　</html> 

一個判斷頁面是否真的關閉和刷新的好方法：

復制代碼代碼如下:

 
window.onbeforeunload=function (){ 
alert("===onbeforeunload==="); 
if(event.clientX>document.body.clientWidth && event.clientY < 0 || event.altKey){ 
alert("你關閉了瀏覽器"); 
}else{ 
alert("你正在刷新頁面"); 
} 
} 

這段代碼就是判斷觸發(fā)onbeforeunload事件時，鼠標是否點擊了關閉按鈕，或者按了ALT+F4來關閉網(wǎng)頁，如果是，則認為系統(tǒng)是關閉網(wǎng)頁，否則在認為系統(tǒng)是刷新網(wǎng)頁。

您可能感興趣的文章: