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