【原】js離開頁面執行函數 onbeforeunload與onunload事件


在最近的項目中,需要做到一個時間,就是用戶離開頁面的時候,我需要緩存頁面其中一部分的內容,但是我不需要用戶刷新的時候也緩存,我只希望在我用戶離開的時候

執行這個函數。百度之,有onbeforeunload與onunload這兩個事件,但是onbeforeunload在用戶刷新的時候也會執行。搞得我弄的挺久的,所以想在這里做一個小小的總結

 

onbeforeunload與onunload事件

onbeforeunload定義和用法

onbeforeunload 事件在即將離開當前頁面(刷新或關閉)時觸發。

該事件可用於彈出對話框,提示用戶是繼續瀏覽頁面還是離開當前頁面。

對話框默認的提示信息根據不同的瀏覽器有所不同,標准的信息類似 "確定要離開此頁嗎?"。該信息不能刪除。

但你可以自定義一些消息提示與標准信息一起顯示在對話框。

注意: 如果你沒有在 <body> 元素上指定 onbeforeunload 事件,則需要在 window 對象上添加事件,並使用 returnValue 屬性創建自定義信息(查看以下語法實例)。

注意: 在 Firefox 瀏覽器中,只顯示默認提醒信息(不顯示自定義信息)。

使用方法:

1、

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test</title>
</head>
<body onbeforeunload="return test()">
	
</body>
<script type="text/javascript">
	function test(){
    	return "你確定要離開嗎";
	}
</script>
</html>

或者:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test</title>
</head>
<body>
	
</body>
<script type="text/javascript">
window.onbeforeunload=function(){
	return "你確定要離開嗎";
}

</script>
</html>

事件觸發的時候彈出一個有確定和取消的對話框,確定則離開頁面,取消則繼續待在本頁。當然你可以自定義提示文本。

那么,當我只需要在我離開時執行這個函數,而刷新的時候不執行,那怎么做呢?

 

 window.onbeforeunload = function() {

	    var n = window.event.screenX - window.screenLeft;

	    var b = n > document.documentElement.scrollWidth - 20;

	    if (!(b && window.event.clientY < 0 || window.event.altKey)) {
	        //window.event.returnValue = "真的要刷新頁面么?"; 
	        
	         //這里放置我想執行緩存的代碼
	         cacheFunction();
	        
	    }
  } 

 這樣,我離開頁面時,可以執行我的緩存代碼,而不彈出提示框,我刷新時也不彈出提示框,也不執行。值得一提的時,這個時候,要將ajax設置為同步,即:ajax里面的 async改為: false;

瀏覽器兼容情況

IE、Chrome、Safari 完美支持

Firefox 不支持文字提醒信息

Opera 不支持

IE6,IE7 使用 onbeforeunload 遇到的bug

 

 

 

2、onunload定義和用法

 

onunload 事件在用戶退出頁面時發生。

 

使用方法和onbeforeunload類似

window.onunload = function(){
   return "你確定要離開嗎"
}

 

瀏覽器兼容情況

IE6,IE7,IE8 中 刷新頁面、關閉瀏覽器之后、頁面跳轉之后都會執行;

IE9 刷新頁面 會執行,頁面跳轉、關閉瀏覽器不能執行;

firefox(包括firefox3.6) 關閉標簽之后、頁面跳轉之后、刷新頁面之后能執行,但關閉瀏覽器不能執行;

Safari 刷新頁面、頁面跳轉之后會執行,但關閉瀏覽器不能執行;

Opera、Chrome 任何情況都不執行。

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM