使用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 相关文章推荐
关于可运行代码无法正常执行的使用说明
May 13 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
Jun 26 Javascript
使用Chrome浏览器调试AngularJS应用的方法
Jun 18 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
js中常用的Math方法总结
Jan 12 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 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安装为Apache DSO
2006/10/09 PHP
php将数据库导出成excel的方法
2010/05/07 PHP
php 获取百度的热词数据的代码
2012/02/18 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
理解 JavaScript 预解析
2009/10/25 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
土木工程应届生自荐信
2013/09/24 职场文书
日语翻译个人求职的自我评价
2013/10/14 职场文书
财务与信息服务专业推荐信
2013/11/28 职场文书
生产副总岗位职责
2013/11/28 职场文书
校友会欢迎辞
2014/01/13 职场文书
社团2014年植树节活动总结
2014/03/11 职场文书
见习期个人总结
2015/03/05 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
Node实现搜索框进行模糊查询
2021/06/28 Javascript