资讯专栏INFORMATION COLUMN

JS基础篇--JS之onunload、onbeforeunload事件详解

rollback / 1691人阅读

摘要:事件事件在用户退出页面时发生。注意事件同样触发了页面载入事件事件。如图所示大体一句话描述和支持事件但是或者不支持该事件。浏览器兼容情况完美支持不支持文字提醒信息不支持如图所示使用遇到的凡是标签都会触发事件包括这种。

简介

onunload,onbeforeunload都是在刷新或关闭时调用,可以在

大体一句话描述:IE, Firefox, 和 Safari 支持 onunload 事件, 但是 Chrome 或者 Opera 不支持该事件。

onbeforeunload事件

onbeforeunload 事件在即将离开当前页面(刷新或关闭)时触发。

该事件可用于弹出对话框,提示用户是继续浏览页面还是离开当前页面。

对话框默认的提示信息根据不同的浏览器有所不同,标准的信息类似 "确定要离开此页吗?"。该信息不能删除。

但你可以自定义一些消息提示与标准信息一起显示在对话框。

注意: 如果你没有在 元素上指定 onbeforeunload 事件,则需要在 window 对象上添加事件,并使用 returnValue 属性创建自定义信息(查看以下语法实例)。

语法

html中使用:

JavaScript 中:

object.onbeforeunload=function(){myScript};

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("beforeunload", myScript);

注意: Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

JS中使用例子写法一:

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

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

JS中使用例子写法二:

window.onbeforeunload = function(event) {
    event.returnValue = "我在这写点东西...";
};

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

浏览器兼容情况

IE、Safari 完美支持

Firefox、Chrome 不支持文字提醒信息

Opera 不支持

如图所示:

IE6,IE7 使用 onbeforeunload 遇到的bug

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

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/89507.html

相关文章

  • 监听浏览器刷新及关闭

    摘要:解决思路对于浏览器的关闭和刷新会触发两个事件和,问题在于如何区分用户是想刷新还是退出此时应该将用户催眠,然后获得用户的思想,预判用户走位及操作。。。事件是无法阻止页面关闭的。 需求背景: 为保证‘高度安全性’,用户每次退出页面或浏览器都要清除登陆信息,每次进入系统都要重新登陆(每次登陆还要手机验证码等乱七八糟的验证信息,,,求用户的心里阴影面积),但是刷新页面不可以清除登陆信息。解决思...

    AWang 评论0 收藏0
  • Dom中高big 事件总结(持续更新中)

    摘要:三事件事件在即将离开当前页面刷新或关闭时触发。四事件事件在用户退出页面时发生。五事件该事件在存储更新时触发六事件该事件在窗口的浏览历史对象发生改变时触发七事件事件在用户中止加载或元素时触发。 将前段时间自己用到的,比较少见,但是功能很强大的事件在这里总结下,一来自己重新梳理归档下,二来,没用过的同学也可以尝试用下。其实,这些都是基础知识,但是基础是最重要的。还记得老师说过:基础不牢,地...

    mzlogin 评论0 收藏0
  • JS魔法堂:定义页面的Dispose方法——[before]unload事件启示录

    摘要:坑无视和是十分特殊的事件,要求事件处理函数内部不能阻塞当前线程,而却恰恰就会阻塞当前线程,因此规范中以明确在和中直接无视这几个方法的调用。 前言  最近实施的同事报障,说用户审批流程后直接关闭浏览器,操作十余次后系统就报用户会话数超过上限,咨询4A同事后得知登陆后需要显式调用登出API才能清理4A端,否则必然会超出会话上限。 即使在页面上增添一个登出按钮也无法保证用户不会直接关掉浏览器...

    Chiclaim 评论0 收藏0
  • 页面生命周期:DOMContentLoaded, load, beforeunload, unloa

    摘要:所以有可能在所有脚本执行完毕后触发。如果用户即将离开页面或者关闭窗口时,事件将会被触发以进行额外的确认。状态表示事件即将被触发。总结页面事件的生命周期事件在树构建完毕后被触发,我们可以在这个阶段使用去访问元素。 页面生命周期:DOMContentLoaded, load, beforeunload, unload 原文地址:http://javascript.info/onload.....

    lx1036 评论0 收藏0
  • 页面生命周期:DOMContentLoaded, load, beforeunload, unloa

    摘要:所以有可能在所有脚本执行完毕后触发。如果用户即将离开页面或者关闭窗口时,事件将会被触发以进行额外的确认。状态表示事件即将被触发。总结页面事件的生命周期事件在树构建完毕后被触发,我们可以在这个阶段使用去访问元素。 页面生命周期:DOMContentLoaded, load, beforeunload, unload 原文地址:http://javascript.info/onload.....

    luckyyulin 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<