使用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 ajax 同步异步的执行 return值不能取得的解决方案
Jan 08 Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
jquery 面包屑导航 具体实现
Jun 05 Javascript
JS小功能(列表页面隔行变色)简单实现
Nov 28 Javascript
js确认删除对话框效果的示例代码
Feb 20 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 Javascript
jquery实现左右滑动式轮播图
Mar 02 Javascript
angularjs中的$eval方法详解
Apr 24 Javascript
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
React 使用Hooks简化受控组件的状态绑定
Mar 18 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 27 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
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
jQuery 连续列表实现代码
2009/12/21 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
Python解析json文件相关知识学习
2016/03/01 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
python中update的基本使用方法详解
2019/07/17 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
德国汉莎航空中国官网: Lufthansa中国
2017/03/30 全球购物
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
财务管理专业应届毕业生求职信
2013/09/22 职场文书
社区交通安全实施方案
2014/03/22 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
学习党章的体会
2014/11/07 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
Springboot中如何自动转JSON输出
2022/06/16 Java/Android