[JavaScript]關閉編輯視窗時提示

下面講講部落格園採用的方案(代碼直接複製部落格園的)

//全域變數: 標記當前頁面是否需要提示(你也可以聲明是否已提交儲存)
var g_blnCheckUnload = true;

//在提交儲存的按鈕用戶端時間中調用此方法, 修改標誌位為不需要提示
function BypassCheck() { g_blnCheckUnload = false; }

window.onbeforeunload = function() { 
if(g_blnCheckUnload) 
//注意: 直接return字串, 沒有window.confirm, 因為onbeforeunload事件自身會提示
        return ("確認離開當前頁面嗎？未儲存的資料將會丟失！"); 
}

頁面調用:

<div class="post_block">
<a onclick="BypassCheck();return CheckInput();" id="Editor_Edit_lkbPost" class="Button" >發布</a>
<a onclick="BypassCheck();return CheckInput();" id="Editor_Edit_lkbDraft" class="Button">存為草稿</a>
<a id="Editor_Edit_lkbCancel" class="Button" href="javascript:__doPostBack('Editor$Edit$lkbCancel','')">取消</a>
</div>

注意上面加粗部分, 在提交儲存按鈕中調用BypassCheck()方法.

個人覺得, onbeforeunload提示在新增記錄的頁面使用是比較妥當的, 但如果在編輯頁面, 最好視使用者操作頻繁程度考慮是否提示, 不然使用者覺得提示過於頻繁影響效率(有些頁面是開啟看一眼就關閉的), 而我們又很難確定使用者是否已經編輯過資料未提交儲存再關閉.

參考文檔:

[1]onbeforeunload和onunload, http://xieyu.blog.51cto.com/213338/55796

[2]這篇有說到關於onbeforeunload和onunload的區別, http://haokong.javaeye.com/blog/578500

摘錄[2]兩者區別部分如下:

區別在於onbeforeunload在onunload之前執行，它還可以阻止onunload的執行。

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

Onunload是無法阻止頁面的更新和關閉的, 而Onbeforeunload 可以做到。

bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" onbeforeunload=" checkLeave()"> 另外還可以用來在頁面關閉的時候關閉session.