使用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 相关文章推荐
js中eval详解
Mar 30 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
javascript获取选中的文本的方法代码
Oct 30 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 Javascript
jQuery实现点击小图显示大图代码分享
Aug 25 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
javascript淘宝主图放大镜功能
Oct 20 Javascript
原生JS实现幻灯片
Feb 22 Javascript
Vue.js实现可编辑的表格
Dec 11 Javascript
详解JavaScript中分解数字的三种方法
Jan 05 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
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
解读PHP的Yii框架中请求与响应的处理流程
2016/03/17 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
Python闭包之返回函数的函数用法示例
2018/01/27 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
Python中return self的用法详解
2018/07/27 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
基于Python爬取搜狐证券股票过程解析
2020/11/18 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
MySQL面试题目集锦
2016/04/14 面试题
自荐信结尾
2013/10/27 职场文书
骨干教师培训制度
2014/01/13 职场文书
民间借贷被告代理词
2015/05/23 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技