使用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 相关文章推荐
ext form 表单提交数据的方法小结
Aug 08 Javascript
jquery中获取select选中值的代码
Jun 27 Javascript
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
js电话号码验证方法
Sep 28 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
Bootstrap面板学习使用
Feb 09 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 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 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
浅谈PHP的反射API
2017/02/26 PHP
php生出随机字符串
2017/07/06 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
Prototype Number对象 学习
2009/07/19 Javascript
一个基于jquery的图片切换效果
2010/07/06 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
Python写的一个简单DNS服务器实例
2014/06/04 Python
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
Python字符串处理实例详解
2017/05/18 Python
python pandas修改列属性的方法详解
2018/06/09 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
社区创先争优承诺书
2014/08/30 职场文书
经验交流材料格式
2014/12/30 职场文书
运动会加油稿
2015/07/22 职场文书
小学教师教育随笔
2015/08/14 职场文书
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python