使用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 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
window.open关于浏览器拦截问题分析及解决方法
Feb 05 Javascript
js运动动画的八个知识点
Mar 12 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
Jun 18 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
Backbone中View之间传值的学习心得
Aug 09 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
基于Vue过渡状态实例讲解
Sep 14 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 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使用静态方法的几个注意事项
2014/09/16 PHP
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
网站上面有这种切换效果
2006/06/26 Javascript
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
2015/08/21 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
Python的Flask框架中web表单的教程
2015/04/20 Python
python在Windows下安装setuptools(easy_install工具)步骤详解
2016/07/01 Python
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
3分钟英语演讲稿
2014/04/29 职场文书
优秀班集体先进事迹材料
2014/05/28 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
教代会开幕词
2015/01/28 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书