最近项目中做到一个功能:在上传页面用户开始上传文件之后用户点击任意跳转都需要弹出提示层进行二次确定才允许他进行跳转,这样做的目的是为了防止用户的错误操作导致这珍贵的UGC 流失(通常用户在一次上传不成功之后,很容易就会打消了上传的念头的了,或去到其他平台进行上传)。

在这里用到的是 onbeforeunload 事件。下面就梳理下 onunload、onbeforeunload 这两个事件,也顺带说说我遇到的问题与解决方案。

onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过 window.onunload来调用。区别在于onbeforeunload在onunload之前执行,它还可 以阻止onunload的执行。

onbeforeunload 是正要去服务器读 取新的页面时调用,此时还没开始读取;而onunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用。

onunload事件

浏览器卸载页面后执行的事件, 虽然网上的资料没说什么兼容性的问题,但是实践发现兼容性并不理想。

使用方法

//JS document
window.onunload = function(){
alert("unload is work");
}

浏览器兼容情况

IE6,IE7,IE8 中 刷新页面、关闭浏览器之后、页面跳转之后都会执行;

IE9 刷新页面 会执行,页面跳转、关闭浏览器不能执行;

firefox(包括firefox3.6) 关闭标签之后、页面跳转之后、刷新页面之后能执行,但关闭浏览器不能执行;

Safari 刷新页面、页面跳转之后会执行,但关闭浏览器不能执行;

Opera、Chrome 任何情况都不执行。

onbeforeunload事件

页面跳转时触发的事件。

使用方法

//JS document
window.onbeforeunload = function(){
return "onbeforeunload is work";
}

return 的值 为你需要告诉用户的提示信息如上面demo的话浏览器的提示是这样(firefox 并不支持文字提醒):

值得注意的是,网上流传说 可以通过检查 e.clientX e.clientY 判断 用户是否点击 右上角关闭浏览器的,但是实践发现 只有 IE6,IE7,IE8 能获取得到具体数值,其他浏览器均为 undefined。

浏览器兼容情况

IE、Chrome、Safari 完美支持

Firefox 不支持文字提醒信息

Opera 不支持

IE6,IE7 使用 onbeforeunload 遇到的bug

凡是 <a> 标签 都会触发 onbeforeunload事件 包括 href=”javascript:void(0)” 这种。

在IE6,IE7 下面 点击 里面的 a 标签,蛋疼的事情就发生了。

解决方法:给这 a标签的 父级 添加 onclick=function(){return false} 即可,不过添加了这个之后 要确保 父级里面没有 input type=”checkbox” 的标签,否则会导致其无效不可点击。

onunload、onbeforeunload事件详解--zhuan的更多相关文章

  1. JS之onunload、onbeforeunload事件详解

    简介 onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过 window.onunload来调用.区别在于onbeforeunload在o ...

  2. 160503、onunload、onbeforeunload事件详解

    最近项目中做到一个功能:在上传页面用户开始上传文件之后用户点击任意跳转都需要弹出提示层进行二次确定才允许他进行跳转,这样做的目的是为了防止用户的错误操作导致这珍贵的UGC 流失(通常用户在一次上传不成 ...

  3. JavaScript事件详解-jQuery的事件实现(三)

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  4. JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  5. 第三天:JS事件详解-事件流

    学习来源: F:\新建文件夹 (2)\HTML5开发\HTML5开发\04.JavaScript基础\6.JavaScript事件详解 学习内容:  1)基础概念 2)举例说明: 代码如上,如果用事件 ...

  6. JavaScript事件详解-zepto的事件实现

    zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...

  7. JAVASCRIPT事件详解-------原生事件基础....

    javaScirpt事件详解-原生事件基础(一)   事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能 ...

  8. iOS中—触摸事件详解及使用

    iOS中--触摸事件详解及使用 (一)初识 要想学好触摸事件,这第一部分的基础理论是必须要学会的,希望大家可以耐心看完. 1.基本概念: 触摸事件 是iOS事件中的一种事件类型,在iOS中按照事件划分 ...

  9. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

随机推荐

  1. Django学习笔记之Django的url反向解析

    0x00 URL反向解析和三种不同的反向解析方式 Django中提供了关于URL的映射的解决方案,可以做两个方向的使用: 1.普通解析过程:由客户端的浏览器发起一个url请求,Django根据URL解 ...

  2. CF1137F Matches Are Not a Child's Play(LCT思维题)

    题目 CF1137F 很有意思的题目 做法 直接考虑带修改的做法,上一次最大值为u,这次修改v,则最大值为v了 我们发现:\(u-v\)这条链会留到最后,序列里的其他元素相对位置不变,这条链会\(u\ ...

  3. Spring Tomcat启动过程

    入口,配置再web.xml中, 初始化applicationContext 创建webApplicationContext,这里可加载web.xml文件中定义了contextClass 获取conte ...

  4. Oracle查询一个表的数据插入到另一个表

    1. 新增一个表,通过另一个表的结构和数据 create table XTHAME.tab1 as select * from DSKNOW.COMBDVERSION 2. 如果表存在: insert ...

  5. 如何生成SSH key

    SSH key提供了一种与GitHub通信的方式,通过这种方式,能够在不输入密码的情况下,将GitHub作为自己的remote端服务器,进行版本控制 步骤 检查SSH keys是否存在 生成新的ssh ...

  6. Vue中使用百度地图——设置地图标注

    知识点:创建Map实例,为指定的位置设置标注 参考博客:https://www.cnblogs.com/liuswi/p/3994757.html 1.效果图:初始化地图,设置指定经纬度为地图中心点坐 ...

  7. 剑指Offer——最长不包含重复字符的子字符串

    Solution 动态规划. f(i)表示包含第i个字符的最长子串. 如果第i个字符没在之前出现过,那么f(i) = f(i - 1) + 1 如果第i个字符在之前出现过,这个时候应该分两种情况,假设 ...

  8. cps/trampoline

    eopl 第五.六两章谈的就是这个问题. 我写了一个 python 版本的程序,先挖个坑,然后等彻底看完再补上. #!/usr/bin/env python # -*- coding: utf-8 - ...

  9. Dancing Links DLX

    Dancing Links DLX Dancing Links 用来解精准覆盖问题. 精准覆盖问题有两种版本. 精准覆盖 : 给一个01矩阵,如何选出若干行,使得每列都有且仅有一个1. 可以求最少行数 ...

  10. kubernetes dashboard 二次开发

    Kubernetes Dashboard 二次开发 官方源码:https://github.com/kubernetes/dashboard 开发文档:https://github.com/kuber ...