使用onbeforeunload属性后的副作用


Posted in Javascript onMarch 08, 2007

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

    使用onbeforeunload属性后的副作用

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

使用onbeforeunload属性后的副作用window.onbeforeunload = function ()
使用onbeforeunload属性后的副作用使用onbeforeunload属性后的副作用
使用onbeforeunload属性后的副作用{
使用onbeforeunload属性后的副作用    
// . . .  
使用onbeforeunload属性后的副作用
    event.returnValue = "You will lose any unsaved content";
使用onbeforeunload属性后的副作用    
// . . .    
使用onbeforeunload属性后的副作用
}

    至于这个窗口是做什么用的,窗口上系统提示的文字(第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",却会出现一个脚本异常,如下图:

    使用onbeforeunload属性后的副作用

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

使用onbeforeunload属性后的副作用try
使用onbeforeunload属性后的副作用使用onbeforeunload属性后的副作用
使用onbeforeunload属性后的副作用{
使用onbeforeunload属性后的副作用    
// 使用onbeforeunload属性后的副作用  
使用onbeforeunload属性后的副作用
    event.returnValue = "You will lose any unsaved content";
使用onbeforeunload属性后的副作用    
// 使用onbeforeunload属性后的副作用  
使用onbeforeunload属性后的副作用
}

使用onbeforeunload属性后的副作用使用onbeforeunload属性后的副作用
catch(e)使用onbeforeunload属性后的副作用{}

Javascript 相关文章推荐
function, new function, new Function之间的区别
Mar 08 Javascript
js function定义函数使用心得
Apr 15 Javascript
读jQuery之五(取DOM元素)
Jun 20 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
JavaScript作用域与作用域链深入解析
Dec 06 Javascript
基于js与flash实现的网站flv视频播放插件代码
Oct 14 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
HTML中不支持静态Expando的元素的问题
Mar 08 #Javascript
使用TextRange获取输入框中光标的位置的代码
Mar 08 #Javascript
获取JavaScript用户自定义类的类名称的代码
Mar 08 #Javascript
JScript内置对象Array中元素的删除方法
Mar 08 #Javascript
在JavaScript中遭遇级联表达式陷阱
Mar 08 #Javascript
原型方法的不同写法居然会影响调试的解决方法
Mar 08 #Javascript
在js中使用"with"语句中跨frame的变量引用问题
Mar 08 #Javascript
You might like
php数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
JavaScript 乱码问题
2009/08/06 Javascript
jQuery 获取URL参数的插件
2010/03/04 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
js css自定义分页效果
2017/02/24 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
Vue组件化通讯的实例代码
2017/06/23 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
python 简易计算器程序,代码就几行
2009/08/29 Python
Python找出list中最常出现元素的方法
2016/06/14 Python
python出现"IndentationError: unexpected indent"错误解决办法
2017/10/15 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
简单了解python关系(比较)运算符
2019/07/08 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
大学四年个人的自我评价
2014/02/26 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
我的中国梦心得体会范文
2016/01/05 职场文书