使用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 相关文章推荐
JavaScript 变量基础知识
Nov 07 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
js模拟实现百度搜索
Jun 28 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解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
jQuery的attr与prop使用介绍
2013/10/10 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
懒加载实现的分页&&网站footer自适应
2016/12/21 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
JavaScript面向对象精要(上部)
2017/09/12 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
python脚本后台执行方式
2019/12/21 Python
利用python实现逐步回归
2020/02/24 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
sort命令的作用和用法
2013/08/25 面试题
策划助理岗位职责
2013/11/18 职场文书
幼儿园小班评语
2014/04/18 职场文书
教师演讲稿大全
2014/05/16 职场文书
对照检查剖析材料
2014/09/30 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
《日月潭》教学反思
2016/02/20 职场文书
MySQL锁机制
2021/04/05 MySQL
详细总结Python常见的安全问题
2021/05/21 Python