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

時間 2019-11-11

標籤離開頁面執行函數 onbeforeunload onunload 事件欄目 JavaScript 简体版

原文原文鏈接

在最近的項目中，須要作到一個時間，就是用戶離開頁面的時候，我須要緩存頁面其中一部分的內容，可是我不須要用戶刷新的時候也緩存，我只但願在我用戶離開的時候javascript

執行這個函數。百度之，有onbeforeunload與onunload這兩個事件，可是onbeforeunload在用戶刷新的時候也會執行。搞得我弄的挺久的，因此想在這裏作一個小小的總結html

onbeforeunload與onunload事件java

onbeforeunload定義和用法

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

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

對話框默認的提示信息根據不一樣的瀏覽器有所不一樣，標準的信息相似 "肯定要離開此頁嗎？"。該信息不能刪除。緩存

但你能夠自定義一些消息提示與標準信息一塊兒顯示在對話框。async

注意： 若是你沒有在 <body> 元素上指定 onbeforeunload 事件，則須要在 window 對象上添加事件，並使用 returnValue 屬性建立自定義信息(查看如下語法實例)。函數

注意： 在 Firefox 瀏覽器中，只顯示默認提醒信息（不顯示自定義信息）。spa

使用方法：firefox

一、

<!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

二、onunload定義和用法

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

使用方法和onbeforeunload相似

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

瀏覽器兼容狀況

IE6，IE7，IE8 中刷新頁面、關閉瀏覽器以後、頁面跳轉以後都會執行；

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

firefox(包括firefox3.6) 關閉標籤以後、頁面跳轉以後、刷新頁面以後能執行，但關閉瀏覽器不能執行；

Safari 刷新頁面、頁面跳轉以後會執行，但關閉瀏覽器不能執行；

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。