使用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 相关文章推荐
jQuery过滤选择器用法分析
Feb 10 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 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 防止单引号,双引号在接受页面转义
2008/07/10 PHP
PHP 地址栏信息的获取代码
2009/01/07 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
python实现RSA加密(解密)算法
2016/02/17 Python
python+django加载静态网页模板解析
2017/12/12 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
Django后台admin的使用详解
2019/07/08 Python
Django模板语言 Tags使用详解
2019/09/09 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
学前教育毕业生自荐信范文
2013/12/24 职场文书
个人求职信范文分享
2014/01/31 职场文书
先进集体事迹材料
2014/02/17 职场文书
行政监察建议书
2014/05/19 职场文书
2014年学校卫生工作总结
2014/11/20 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
民间借贷借条如何写
2015/05/26 职场文书
班级联欢会主持词
2015/07/03 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python