快捷導(dǎo)航

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

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

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

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

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

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

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

復(fù)制代碼代碼如下:

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

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

　　描述：
　　　當(dāng)用戶關(guān)閉一個(gè)頁(yè)面時(shí)觸發(fā) onunload 事件。

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

復(fù)制代碼代碼如下:

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

一個(gè)判斷頁(yè)面是否真的關(guān)閉和刷新的好方法：

復(fù)制代碼代碼如下:

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

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

您可能感興趣的文章: