本文為姜友瑤原創作品 非商業轉載請注明作譯者、出處，並保留本文的原始鏈接。否則追究法律責任！商業轉載請聯系作者！
更多作品請訪問我的個人網站 www.jyymatrix.cc
在一些頁面中，用戶在退出前需要提示用戶是否已經保存當前頁面的內容，以達到防止數據丟失的目的！
我們可以通過 onbeforeunload 事件來實現這個功能
關閉窗口或者按下F5的時候觸發"onbeforeunload" 事件
定義和用法
onbeforeunload 事件在即將離開當前頁面（刷新或關閉）時觸發。
該事件可用於彈出對話框，提示用戶是繼續瀏覽頁面還是離開當前頁面。
對話框默認的提示信息根據不同的瀏覽器有所不同，標准的信息類似 "確定要離開此頁嗎？"。該信息不能刪除。
但你可以自定義一些消息提示與標准信息一起顯示在對話框。
注意： 如果你沒有在 <body> 元素上指定 onbeforeunload 事件，則需要在 window 對象上添加事件，並使用 returnValue 屬性創建自定義信息(查看以下語法實例)。
注意： 在 Firefox 瀏覽器中，只顯示默認提醒信息（不顯示自定義信息）。
方法一：
<script type="text/javascript">
window.onbeforeunload = function() {
return "確認離開當前頁面嗎？未保存的數據將會丟失";
}
</script>
方法二：
<!DOCTYPE html>
<html>
<body onbeforeunload="return myfunction()">
<p>該實例演示了如何向 body 元素添加 "onbeforeunload" 事件。</p>
<p>關閉當前窗口，按下 F5 或點擊以下鏈接觸發 onbeforeunload 事件。</p>
<a href="http://www.w3cschool.cc">點擊調整到w3cschool.cc</a>
<script>
function myfunction() {
return "確認離開當前頁面嗎？未保存的數據將會丟失";
}
</script>
</body>
</html>
瀏覽器支持情況
表格中的數字表示支持該事件的第一個瀏覽器的版本號。
擴展
當然如果只是使用onbeforeunload 事件是滿足不了需求的，因為這樣處理在提交表單的時候也會出現關閉提示，這樣就很不友好了。
一個解決思路就是在表單提交的之前取消這個事件。
代碼如下：
<form method="post" action="http://www.baidu.com" onsubmit="return destroy()" >
<input type="submit" value="提交" />
</form>
</body>
<script type="text/javascript">
window.onbeforeunload = function() {
return "確認離開當前頁面嗎？未保存的數據將會丟失";
}
/**
*提交表單前銷毀提醒事件
*/
function destroy(){
window.onbeforeunload = null;
}
</script>