使用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 相关文章推荐
索趣科技的答案
Feb 07 Javascript
IE bug table元素的innerHTML
Jan 11 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 Javascript
解决vue组件中click事件失效的问题
Nov 09 Javascript
vue 全局封装loading加载教程(全局监听)
Nov 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
一个基于PDO的数据库操作类
2011/03/24 PHP
解析php中const与define的应用区别
2013/06/18 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
JS控制鼠标拒绝点击某一按钮的实例
2017/12/29 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
js实现简易计算器功能
2019/10/18 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
python脚本监控docker容器
2016/04/27 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
如何运行带参数的python脚本
2019/11/15 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
应届生财务会计求职信
2013/11/05 职场文书
校园活动策划书范文
2014/01/10 职场文书
项目投资建议书
2014/05/16 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python