使用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 相关文章推荐
日期 时间js控件
May 07 Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 Javascript
Node.js编码规范
Jul 14 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 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
php5 mysql分页实例代码
2008/04/10 PHP
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
wordpress网站转移到本地运行测试的方法
2017/03/15 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
javascript获取当前ip的代码
2009/05/10 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
Python中str.format()详解
2017/03/12 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
学校采购员岗位职责
2014/01/02 职场文书
高中生家长会演讲稿
2014/01/14 职场文书
小班评语大全
2014/05/04 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
英文慰问信
2015/02/14 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
七一晚会主持词
2015/06/29 职场文书
妇产科护理心得体会
2016/01/22 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server