使用onbeforeunload属性后的副作用
属性 使用 副作用 onbeforeunload
2023-06-13 09:13:54 时间
在使用博客园的编辑器编辑文章时,有一个挺体贴用户的功能,就是如果用户进入编辑器后,不是执行"POST"操作而要退出当前编辑器页面,我们会得到一个Alert窗口提示(如下图)。这个功能其实很简单,就是通过处理window、body或frameset对象或元素的onbeforeunload事件实现的。
这个unbeforeunload的具体用法我就不说了,反正几乎能引起当前页面发生跳转的任何动作,都会触发这个事件。并且它先于unload事件被触发,如果在其的事件处理函数里面向event.returnValue属性赋值非空字符串,就会出现一个如上图的窗口(代码如下)。window.onbeforeunload = function ()
{
// . . .
event.returnValue = "You will lose any unsaved content";
// . . .
}
这个unbeforeunload的具体用法我就不说了,反正几乎能引起当前页面发生跳转的任何动作,都会触发这个事件。并且它先于unload事件被触发,如果在其的事件处理函数里面向event.returnValue属性赋值非空字符串,就会出现一个如上图的窗口(代码如下)。
至于这个窗口是做什么用的,窗口上系统提示的文字(第1行和第3行)已经说的非常清楚了。那么使用这个事件到底有什么问题呢?
我们知道引起当前页面发生条转主要3类事件:
1、对浏览器窗口的操作,比如关闭浏览器、gohome、backward、forward和refresh等;
2、对于网页的Navigatie操作,比如点击链接、在地址栏中执行新的地址、页面表单提交到非当前页面等;
3、脚本代码引起的页面Navigate操作,比如执行navigate、locatoin方法(replace,reload, assign)和修改location属性(href,search)等。
以上的1-2类操作引起onbeforeunload的事件,使用起来基本没有任何的问题,可是执行第3类页面条转操作却有点小问题。就是在上图的窗口出现后,如果点选"OK",确实就OK,页面正确跳转了。可是如果这个时候,我们点选"Cancel",却会出现一个脚本异常,如下图:
解决方法就是把脚本调用try一下,但这似乎是IE的一个bug的说。
相关文章
- Fabric.js 使用纯色遮挡画布(前景色)
- Vue(5)计算属性computed
- Vue02基础语法-插值+过滤器+计算属性+计算属性
- 【说站】js使用hasOwnProperty判断属性
- 【说站】python中__file__属性的使用
- 【说站】css中flex-grow属性是什么
- 小程序商品规格属性界面布局,以及存在的坑
- 链接标签使用及属性
- 【约束布局】ConstraintSet 约束集 ( 简介 | 约束属性集合 | 约束集初始化 | 约束集应用到布局中 | 关键帧动画 | TransitionManager 使用 )
- 【Android Gradle 插件】自定义 Gradle 任务 ⑬ ( DefaultTask 中的任务输入和输出属性 | TaskInputs 任务输入接口 | FileCollection )
- 【Unity3D】材质 Material ( 材质简介 | 创建材质 | 设置材质属性 | 对 3D 物体应用材质 | 资源拖动到 Inspector 检查器中的 Material 属性中 )
- iOS-文本段落样式NSMutableParagraphStyle与NSParagraphStyle的使用和一些富文本处理属性详解手机开发
- 属性动画原理解析详解手机开发
- Mybatis-plus使用注解 @TableField(exist = false) 注明非数据库字段属性详解编程语言
- ios jquery css(‘left’)无法读取属性解决的方法详解编程语言
- Dooble是用Qt4写的另外一款WebKit浏览器,主要在保护用户隐私方面取胜。虽然它和其他浏览器提供的安全性相差不打,但是也有一些特有的属性比如内含的桌面等。Dooble桌面使得用户可以在增加桌面背景的同时添加应用程序启动,除了从软件包管理器安装外,还可以使用Ubuntu 10.10版本0.07安装,此时的Dooble版本为1.14,同时还要有Qt编码工具如qt4-qmake等。
- MySQL中如何设置表中性别属性(mysql中sex设置)
- JavaScriptdelete属性的使用
- javascript操作cookies及正确使用cookies的属性
- script标签属性type与language使用选择
- c#中使用自动属性减少代码输入量
- jQuery属性选择器element[herf*='value']使用示例
- jquery中html、val与text三者属性取值的联系与区别介绍
- C#类中属性与成员变量的使用小结
- javascript向后台传送相同属性的参数即数组参数
- JS使用getComputedStyle()方法获取CSS属性值