快捷導(dǎo)航

淺談javascript中onbeforeunload與onunload事件

更新時(shí)間：2015年12月10日 11:06:49 投稿：hebedich

javascript中onbeforeunload與onunload事件就是頁(yè)面加載前與頁(yè)面關(guān)閉時(shí)的兩個(gè)功能的函數(shù)，可以防止頁(yè)面刷新時(shí)給提示再刷新或頁(yè)面關(guān)閉時(shí)給出提示，下面我來介紹onbeforeunload與onunload事件用法。

在最近的項(xiàng)目中，需要做到一個(gè)時(shí)間，就是用戶離開頁(yè)面的時(shí)候，我需要緩存頁(yè)面其中一部分的內(nèi)容，但是我不需要用戶刷新的時(shí)候也緩存，我只希望在我用戶離開的時(shí)候

執(zhí)行這個(gè)函數(shù)。百度之，有onbeforeunload與onunload這兩個(gè)事件，但是onbeforeunload在用戶刷新的時(shí)候也會(huì)執(zhí)行。搞得我弄的挺久的，所以想在這里做一個(gè)小小的總結(jié)

onbeforeunload與onunload事件

onbeforeunload定義和用法

onbeforeunload 事件在即將離開當(dāng)前頁(yè)面（刷新或關(guān)閉）時(shí)觸發(fā)。

該事件可用于彈出對(duì)話框，提示用戶是繼續(xù)瀏覽頁(yè)面還是離開當(dāng)前頁(yè)面。

對(duì)話框默認(rèn)的提示信息根據(jù)不同的瀏覽器有所不同，標(biāo)準(zhǔn)的信息類似 "確定要離開此頁(yè)嗎？"。該信息不能刪除。

但你可以自定義一些消息提示與標(biāo)準(zhǔn)信息一起顯示在對(duì)話框。

注意：如果你沒有在 <body> 元素上指定 onbeforeunload 事件，則需要在 window 對(duì)象上添加事件，并使用 returnValue 屬性創(chuàng)建自定義信息(查看以下語法實(shí)例)。

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

使用方法：

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

事件觸發(fā)的時(shí)候彈出一個(gè)有確定和取消的對(duì)話框，確定則離開頁(yè)面，取消則繼續(xù)待在本頁(yè)。當(dāng)然你可以自定義提示文本。

那么，當(dāng)我只需要在我離開時(shí)執(zhí)行這個(gè)函數(shù)，而刷新的時(shí)候不執(zhí)行，那怎么做呢？

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 = "真的要刷新頁(yè)面么？";
      
      //這里放置我想執(zhí)行緩存的代碼
      cacheFunction();
      
    }
 }

　這樣，我離開頁(yè)面時(shí)，可以執(zhí)行我的緩存代碼，而不彈出提示框，我刷新時(shí)也不彈出提示框，也不執(zhí)行。值得一提的時(shí)，這個(gè)時(shí)候，要將ajax設(shè)置為同步，即：ajax里面的 async改為: false；

瀏覽器兼容情況

IE、Chrome、Safari 完美支持

Firefox 不支持文字提醒信息

Opera 不支持

IE6,IE7 使用 onbeforeunload 遇到的bug

2、onunload定義和用法

onunload 事件在用戶退出頁(yè)面時(shí)發(fā)生。

使用方法和onbeforeunload類似

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

瀏覽器兼容情況

IE6，IE7，IE8 中刷新頁(yè)面、關(guān)閉瀏覽器之后、頁(yè)面跳轉(zhuǎn)之后都會(huì)執(zhí)行；

IE9 刷新頁(yè)面會(huì)執(zhí)行，頁(yè)面跳轉(zhuǎn)、關(guān)閉瀏覽器不能執(zhí)行；

firefox(包括firefox3.6) 關(guān)閉標(biāo)簽之后、頁(yè)面跳轉(zhuǎn)之后、刷新頁(yè)面之后能執(zhí)行，但關(guān)閉瀏覽器不能執(zhí)行；

Safari 刷新頁(yè)面、頁(yè)面跳轉(zhuǎn)之后會(huì)執(zhí)行，但關(guān)閉瀏覽器不能執(zhí)行；

Opera、Chrome 任何情況都不執(zhí)行。

總結(jié)

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

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

您可能感興趣的文章: