淺談javascript中onbeforeunload與onunload事件_基礎知識-js教程-PHP中文網

淺談javascript中onbeforeunload與onunload事件_基礎知識

WBOY

發布： 2016-05-16 15:26:22

原創

1141 人瀏覽過

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

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

onbeforeunload與onunload事件

onbeforeunload定義與用法

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

該事件可用於彈出對話框，提示使用者是繼續瀏覽頁面還是離開目前頁面。

對話方塊預設的提示訊息會根據不同的瀏覽器有所不同，標準的資訊類似 "確定要離開此頁嗎？"。該資訊不能刪除。

但你可以自訂一些訊息提示與標準資訊一起顯示在對話框中。

注意：如果你沒有在

元素上指定 onbeforeunload 事件，則需要在 window 物件上新增事件，並使用 returnValue 屬性建立自訂資訊(查看下列語法實例)。

注意：在 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

2、onunload定義與用法

onunload 事件在使用者登出頁面時發生。

使用方法和onbeforeunload類似

window.onunload = function(){
  return "你确定要离开吗"
}

登入後複製

瀏覽器相容狀況

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

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

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

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

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

總結

Onunload，onbeforeunload都是在刷新或關閉時調用，可以在<script>腳本中透過window.onunload來指定或在<body>裡指定。差別在於onbeforeunload在onunload之前執行，它也可以阻止onunload的執行。 <br /> Onbeforeunload也是在頁面刷新或關閉時調用，Onbeforeunload是正要去伺服器讀取新的頁面時調用，此時還沒開始讀取；而onunload則已經從伺服器上讀到了需要加載的新的頁面，在即將替換掉當前頁面時調用。 Onunload是無法封鎖頁面的更新和關閉的。而 Onbeforeunload 可以做到。 </script>

頁面載入時只執行onload
頁面關閉時先執行onbeforeunload，最後onunload
頁面刷新時先執行onbeforeunload，然後onunload，最後onload。