使用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中的prototype使用说明
Apr 13 Javascript
JS与C#编码解码
Dec 03 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
提高Web性能的前端优化技巧总结
Feb 27 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 Javascript
angular2 NgModel模块的具体使用方法
Apr 10 Javascript
webpack项目使用eslint建立代码规范实现
May 16 Javascript
JS如何判断对象是否包含某个属性
Aug 29 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
星际争霸任务指南——人族
2020/03/04 星际争霸
最常用的8款PHP调试工具
2014/07/06 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
JavaScript类库D
2010/10/24 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
JS实现碰撞检测的方法分析
2018/01/19 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
python计数排序和基数排序算法实例
2014/04/25 Python
python函数局部变量用法实例分析
2015/08/04 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
Python shelve模块实现解析
2019/08/28 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
HTML5新增加的功能详解
2016/09/05 HTML / CSS
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
仓管员岗位职责范文
2013/11/08 职场文书
企业活动策划方案
2014/06/02 职场文书
校园安全标语
2014/06/07 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
公司奖励通知
2015/04/21 职场文书
go类型转换及与C的类型转换方式
2021/05/05 Golang