[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.