JS之onunload、onbeforeunload事件详解
簡介
onunload，onbeforeunload都是在刷新或關閉時調用，可以在<script>腳本中通過 window.onunload來調用。區別在于onbeforeunload在onunload之前執行，它還可 以阻止onunload的執行。
onbeforeunload 是正要去服務器讀 取新的頁面時調用，此時還沒開始讀取；而onunload則已經從服務器上讀到了需要加載的新的頁面，在即將替換掉當前頁面時調用。
onunload事件
onunload 事件在用戶退出頁面時發生。
onunload 發生于當用戶離開頁面時發生的事件(通過點擊一個連接，提交表單，關閉瀏覽器窗口等等。)
注意： onunload 事件同樣觸發了頁面載入事件(+ onload 事件)。
語法
直接使用在html中：
<body onload="SomeJavaScriptCode">
注：以下 HTML 標簽支持 onunload :
<body>,<frameset>
JavaScript 中:
window.onunload=function(){SomeJavaScriptCode};
例子：
//JS document
window.onunload = function(){
alert("unload is work");
}
瀏覽器兼容情況
IE瀏覽器 頁面跳轉、刷新頁面能執行，但關閉瀏覽器不能執行；
firefox 頁面跳轉能執行，但刷新頁面、關閉瀏覽器不能執行；
Safari 刷新頁面、頁面跳轉，關閉瀏覽器都會執行；
Opera、Chrome任何情況都不執行。
如圖所示：
大體一句話描述：IE, Firefox, 和 Safari 支持 onunload 事件, 但是 Chrome 或者 Opera 不支持該事件。
onbeforeunload事件
onbeforeunload 事件在即將離開當前頁面（刷新或關閉）時觸發。
該事件可用于彈出對話框，提示用戶是繼續瀏覽頁面還是離開當前頁面。
對話框默認的提示信息根據不同的瀏覽器有所不同，標準的信息類似 "確定要離開此頁嗎？"。該信息不能刪除。
但你可以自定義一些消息提示與標準信息一起顯示在對話框。
注意： 如果你沒有在 <body> 元素上指定 onbeforeunload 事件，則需要在 window 對象上添加事件，并使用 returnValue 屬性創建自定義信息(查看以下語法實例)。
語法
html中使用：
<element onbeforeunload="myScript">
JavaScript 中：
object.onbeforeunload=function(){myScript};
JavaScript 中, 使用 addEventListener() 方法:
object.addEventListener("beforeunload", myScript);
注意： Internet Explorer 8 及更早 IE 版本不支持
addEventListener()方法。
JS中使用例子寫法一：
//JS document
window.onbeforeunload = function(){
return "onbeforeunload is work";
}
return 的值 為你需要告訴用戶的提示信息如上面demo的話瀏覽器的提示是這樣(firefox ，Chrome并不支持文字提醒)。
JS中使用例子寫法二：
window.onbeforeunload = function(event) {
event.returnValue = "我在這寫點東西...";
};
值得注意的是，網上流傳說 可以通過檢查 e.clientX e.clientY 判斷 用戶是否點擊 右上角關閉瀏覽器的，但是實踐發現 只有 IE6，IE7，IE8 能獲取得到具體數值，其他瀏覽器均為 undefined。
瀏覽器兼容情況
IE、Safari 完美支持
Firefox、Chrome 不支持文字提醒信息
Opera 不支持
如圖所示：
IE6,IE7 使用 onbeforeunload 遇到的bug
凡是 <a> 標簽 都會觸發 onbeforeunload事件 包括 href=”javascript:void(0)” 這種。
在IE6，IE7 下面 點擊 里面的 a 標簽，蛋疼的事情就發生了。
解決方法：給這 a標簽的 父級 添加 onclick=function(){return false} 即可，不過添加了這個之后 要確保 父級里面沒有 input type=”checkbox” 的標簽，否則會導致其無效不可點擊。
總結
以上是生活随笔為你收集整理的JS之onunload、onbeforeunload事件详解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 怎样选购适合自己的汽车？
- 下一篇： 蔓越莓怎么做好吃