在最近的項目中,需要做到一個時間,就是用戶離開頁面的時候,我需要緩存頁面其中一部分的內容,但是我不需要用戶刷新的時候也緩存,我只希望在我用戶離開的時候
執行這個函數。百度之,有onbeforeunload與onunload這兩個事件,但是onbeforeunload在用戶刷新的時候也會執行。搞得我弄的挺久的,所以想在這里做一個小小的總結
onbeforeunload與onunload事件
onbeforeunload定義和用法
onbeforeunload 事件在即將離開當前頁面(刷新或關閉)時觸發。
該事件可用于彈出對話框,提示用戶是繼續瀏覽頁面還是離開當前頁面。
對話框默認的提示信息根據不同的瀏覽器有所不同,標準的信息類似 "確定要離開此頁嗎?"。該信息不能刪除。
但你可以自定義一些消息提示與標準信息一起顯示在對話框。
注意: 如果你沒有在 <body> 元素上指定 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的執行。
Onbeforeunload也是在頁面刷新或關閉時調用,Onbeforeunload是正要去服務器讀取新的頁面時調用,此時還沒開始讀取;而onunload則已經從服務器上讀到了需要加載的新的頁面,在即將替換掉當前頁面時調用。Onunload是無法阻止頁面的更新和關閉的。而 Onbeforeunload 可以做到。
頁面加載時只執行onload
頁面關閉時先執行onbeforeunload,最后onunload
頁面刷新時先執行onbeforeunload,然后onunload,最后onload。