onunload、onbeforeunload事件詳解--zhuan

標籤：java   使用   io   strong   檔案   for   ar   問題   

最近項目中做到一個功能：在上傳頁面使用者開始上傳檔案之後使用者點擊任意跳轉都需要彈出提示層進行二次確定才允許他進行跳轉，這樣做的目的是為了防止使用者的錯誤操作導致這珍貴的UGC 流失(通常使用者在一次上傳不成功之後，很容易就會打消了上傳的念頭的了，或去到其他平台進行上傳)。

在這裡用到的是 onbeforeunload 事件。下面就梳理下 onunload、onbeforeunload 這兩個事件，也順帶說說我遇到的問題與解決方案。

onunload，onbeforeunload都是在重新整理或關閉時調用，可以在<script>指令碼中通過 window.onunload來調用。區別在於onbeforeunload在onunload之前執行，它還可 以阻止onunload的執行。

onbeforeunload 是正要去伺服器讀 取新的頁面時調用，此時還沒開始讀取；而onunload則已經從伺服器上讀到了需要載入的新的頁面，在即將替換掉當前頁面時調用。

onunload事件

瀏覽器卸載頁面後執行的事件, 雖然網上的資料沒說什麼相容性的問題，但是實踐發現相容性並不理想。

使用方法

//JS documentwindow.onunload = function(){alert("unload is work");}

瀏覽器安全色情況

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

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

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

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

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

onbeforeunload事件

頁面跳轉時觸發的事件。

使用方法

//JS documentwindow.onbeforeunload = function(){return "onbeforeunload is work";}

return 的值 為你需要告訴使用者的提示資訊如上面demo的話瀏覽器的提示是這樣(firefox 並不支援文字提醒)：

值得注意的是，網上流傳說 可以通過檢查 e.clientX e.clientY 判斷 使用者是否點擊 右上方關閉瀏覽器的，但是實踐發現 只有 IE6，IE7，IE8 能擷取得到具體數值，其他瀏覽器均為 undefined。

瀏覽器安全色情況

IE、Chrome、Safari 完美支援

Firefox 不支援文字提醒資訊

Opera 不支援

IE6,IE7 使用 onbeforeunload 遇到的bug

凡是 <a> 標籤 都會觸發 onbeforeunload事件 包括 href=”javascript:void(0)” 這種。

在IE6，IE7 下面 點擊 裡面的 a 標籤，蛋疼的事情就發生了。

解決方案：給這 a標籤的 父級 添加 onclick=function(){return false} 即可，不過添加了這個之後 要確保 父級裡面沒有 input type=”checkbox” 的標籤，否則會導致其無效不可點擊。