使用onbeforeunload属性后的副作用

    在使用博客园的编辑器编辑文章时,有一个挺体贴用户的功能,就是如果用户进入编辑器后,不是执行"POST"操作而要退出当前编辑器页面,我们会得到一个Alert窗口提示(如下图)。这个功能其实很简单,就是通过处理window、body或frameset对象或元素的onbeforeunload事件实现的。

    PromptDialog.png

    这个unbeforeunload的具体用法我就不说了,反正几乎能引起当前页面发生跳转的任何动作,都会触发这个事件。并且它先于unload事件被触发,如果在其的事件处理函数里面向event.returnValue属性赋值非空字符串,就会出现一个如上图的窗口(代码如下)。

window.onbeforeunload = function ()
{
    
// . . .  
    event.returnValue = "You will lose any unsaved content";
    
// . . .    
}

    至于这个窗口是做什么用的,窗口上系统提示的文字(第1行和第3行)已经说的非常清楚了。那么使用这个事件到底有什么问题呢?

    我们知道引起当前页面发生条转主要3类事件:
    1、对浏览器窗口的操作,比如关闭浏览器、go home、backward、forward和refresh等;
    2、对于网页的Navigatie操作,比如点击链接、在地址栏中执行新的地址、页面表单提交到非当前页面等;
    3、脚本代码引起的页面Navigate操作,比如执行navigate、locatoin方法(replace, reload, assign)和修改location属性(href, search)等。

    以上的1-2类操作引起onbeforeunload的事件,使用起来基本没有任何的问题,可是执行第3类页面条转操作却有点小问题。就是在上图的窗口出现后,如果点选"OK",确实就OK,页面正确跳转了。可是如果这个时候,我们点选"Cancel",却会出现一个脚本异常,如下图:

    ErrorDialog.png

    解决方法就是把脚本调用try一下,但这似乎是IE的一个bug的说。

try
{
    
//   
    event.returnValue = "You will lose any unsaved content";
    
//   
}

catch(e){}

posted on 2005-09-30 00:13 birdshome 阅读(12259) 评论(14) 编辑 收藏

评论

#1楼  回复 引用 查看   

打错字了。。。:)
反正几乎能引起当前页面发生条转的任何动作
条转
2005-09-30 10:01 | 川仔      

#2楼  回复 引用   

不错,呵呵
2005-09-30 17:59 | 小胡子[未注册用户]

#3楼  回复 引用 查看   

How do u disable this warning on a page that has postback .. e.g. a dropdown list..? Thanks..
2005-10-03 23:43 | netspring      

#4楼[楼主]  回复 引用 查看   

你说的是要去除任何的脚本错误警告吗?
try following case:
window.onerror = function(msg, url, line)
{
    window.status = "Script Error: " +msg + ", Ln: " + line;
    return true;
};
2005-10-08 14:53 | birdshome      

#5楼  回复 引用   

不错
2005-11-24 15:55 | Nameless[未注册用户]

#6楼  回复 引用   

尝试不让它出那个提示框,但没成功
2006-03-03 17:20 | blue1018[未注册用户]

#7楼  回复 引用   

不过我按照你的方法把event.returnvalue try起来,但是还是会有错误。请问楼主怎么回事啊?my email:vzs97@163.com谢谢。
2006-08-24 10:16 | vzs[未注册用户]

#8楼  回复 引用 查看   

老大您的这种写法在ff中不受支持。
只有这样的写法才在ff中受到支持

<body onbeforeunload="return 'asdq';">


不知道我演示正确不,请指教!
2007-01-19 23:49 | 在北京的湖南人      

#9楼  回复 引用 查看   

我想用这个实现如果用户修改了页面的文本筐后 没有保存就提示保存
2007-01-20 09:17 | 高海东      

#10楼  回复 引用   

ASP.NET AJAX + ASP.NET Futures July 2007 的 History ,UpdatePanel 每有更新触发,IE7下即会弹出一次onbeforeunload的确认,烦。FF2下没有这样的弹出,但在关闭时正常弹出确认。
2007-09-22 12:22 | 大奔[未注册用户]

#11楼  回复 引用 查看   

请问一下你是怎么判断他不是由_dopostback引发的onbeforeunload事件的,郁闷中。。。
2009-03-12 22:24 | Kenny.Song      

#12楼  回复 引用 查看   

老大,你这个方法兼容FF3.6+,IE7+,CROME么?
2011-09-10 00:10 | 生产力      

导航

公告

  原创技术文章和心得,转载必须注明来源"博客园"!
  贴子以"现状"提供,且没有任何担保,同时也没有授予任何权利。
昵称:birdshome
园龄:7年10个月
荣誉:推荐博客
粉丝:73
关注:3

搜索

 

常用链接

我的标签

随笔分类(337)

文章分类(147)

相册

Ex-Colleagues

常用链接

兄弟情深

积分与排名

  • 积分 - 3145044
  • 排名 - 6

最新评论

阅读排行榜

推荐排行榜