使用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 相关文章推荐
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
Jquery操作radio的简单实例
Jan 06 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
May 10 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
小程序云开发教程如何使用云函数实现点赞功能
May 18 Javascript
layui 实现自动选择radio单选框(checked)的方法
Sep 03 Javascript
简单了解常用的JavaScript 库
Jul 16 Javascript
js实现翻牌小游戏
Jul 31 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
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
PHP5中MVC结构学习
2006/10/09 PHP
php数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
javascript常用的设计模式
2017/02/09 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
python将文本转换成图片输出的方法
2015/04/28 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
python3中的md5加密实例
2018/05/29 Python
Python如何调用JS文件中的函数
2019/08/16 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
Python txt文件如何转换成字典
2020/11/03 Python
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
计算机专业推荐信范文
2013/11/27 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
学校团代会开幕词
2016/03/04 职场文书
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs