使用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 相关文章推荐
用javascript来实现动画导航效果的代码
Dec 16 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
JavaScript中的关键字"VAR"使用详解 分享
Jul 31 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
php正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
PHP+Javascript实现在线拍照功能实例
2015/07/18 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
在Django的视图中使用数据库查询的方法
2015/07/16 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
python和shell获取文本内容的方法
2018/06/05 Python
python3实现磁盘空间监控
2018/06/21 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
python3 拼接字符串的7种方法
2018/09/12 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
应届生财务管理求职信
2013/11/06 职场文书
建筑工程技术应届生求职信
2013/11/17 职场文书
研讨会主持词
2014/04/02 职场文书
2015年工商所工作总结
2015/05/21 职场文书
贷款工作证明模板
2015/06/12 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers
python数字类型和占位符详情
2022/03/13 Python