onbeforeunload事件_pageload事件何时触发

onbeforeunload事件_pageload事件何时触发beforeunload事件简介当窗口,文档及其资源即将卸载时,将触发该事件。该文档仍然可见,此时事件仍可取消。如果为returnValueEvent属性分配了一个字符串,则会出现一个对话框,要求用户确认离开该页面(参见下面的示例)。IE浏览器在对话框中显示返回的字符串,但其他浏览器会显示自己的消息。如果未提供任何值,则以静默方式处理事件。注意:为了防止不需要…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

beforeunload事件

简介

当窗口,文档及其资源即将卸载时,将触发该事件。该文档仍然可见,此时事件仍可取消。

如果为returnValueEvent属性分配了一个字符串,则会出现一个对话框,要求用户确认离开该页面(参见下面的示例)。IE浏览器在对话框中显示返回的字符串,但其他浏览器会显示自己的消息。如果未提供任何值,则以静默方式处理事件。

注意:为了防止不需要的弹出窗口,浏览器可能不会显示在beforeunload事件处理程序中创建的提示,除非页面已与之交互,甚至根本不显示它们。

PS:如果进入当前页面后没有用户没有与页面进行任何交互(比如鼠标在页面上点击),直接关掉或者刷新当前页面是没有弹窗提示。一定要与页面进行交互之后,才能在页面卸载的时候弹出确认离开的对话框;没有进行页面交互,也是会触发beforeunload事件的,只是不会弹出确认离开的对话框

语法

//通用
window.onbeforeunload = function (event) {};
//IE9+
window.addEventListener("beforeunload", function (event) {});

Jetbrains全家桶1年46,售后保障稳定

beforeunload事件对象属性

属性 类型 描述
target 只读 EventTarget 事件目标(DOM树中最顶层的目标)。
type 只读 DOMString 事件的类型。
bubbles 只读 Boolean 事件通常会冒泡吗?
cancelable 只读 Boolean 可以取消活动吗?
returnValue[1] DOMString 事件的当前返回值(显示用户的消息)。

[1]为了防止网站欺骗用户,谷歌浏览器和火狐浏览器已经废弃设置returnValue,谷歌浏览器和火狐浏览器弹窗只显示各自系统通用字符串,忽略自定义字符串,IE依然可以显示自定义字符串,Edge(IE12+)依然可以显示自定义字符串。

PS:不用再怀疑为什么设置了returnValue没有效果了。

Google声明:

https://developers.google.com/web/updates/2016/04/chrome-51-deprecations?hl=en#remove_custom_messages_in_onbeforeunload_dialogs

示例

window.onbeforeunload = function (event) {
  event = event || window.event;
  event.returnValue = "xxxxxxx";
};

window.addEventListener("beforeunload", function (event) {
  event = event || window.event;
  event.returnValue = "xxxxxxx";
});

window.addEventListener("beforeunload", function (event) {
  event = event || window.event;
  event.preventDefault();
});

事件触发场景

  1. 关闭浏览器窗口
  2. 通过地址栏或收藏夹前往其他页面的时候
  3. 点击返回,前进,刷新,主页其中一个的时候
  4. 点击 一个前往其他页面的url连接的时候
  5. 使用document.write() 方法(输出内容)
  6. 使用document.open() 打开一个新的空白文档
  7. 使用document.close() 方法可关闭一个由open()方法打开的输出流,并显示选定的数据。
  8. 当使用window.open() 打开一个页面,并把本页的window的名字传给要打开的页面的时候。
  9. 使用window.close() 关闭页面的时候
  10. 重新赋予window.location.href的值的时候。
  11. 通过input type=”submit”按钮提交一个具有指定action的表单的时候。
  12. 使用form.submit() 提交表单的时候

应用场景

onbeforeunload对话框用于现代Web上的两件事:

  1. 防止用户无意中丢失数据。
  2. 欺骗用户。

参考:

https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/201131.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 二分查找

    二分查找

  • c语言基础知识菜鸟_c语言入门基础100题

    c语言基础知识菜鸟_c语言入门基础100题菜鸟教程之C语言基础(上)一、前言:前几天,在看另一个教程视频,总感觉太啰嗦,讲的东西不符合我想要的。这里,通过菜鸟教程,看一遍文档,打一遍笔记,想通过这样学一下C语言的基础。感谢菜鸟教程。

  • 《老漏洞复现与分析篇》 – 其一 – shift后门

    《老漏洞复现与分析篇》 – 其一 – shift后门引言因为本菜鸡的博客没什么文章素材,所以想开一个新文章类别,本来想整一个漏洞分析和复现的,无奈由于实力不允许,只能再前面加一个“老”字,整一点多年前的老漏洞拿来复现和分析。俗话说得好,要善于总结前人的经验和智慧,才能在自己的前进道路上走得更快。本系列在我能理解的范围内我都会详细讲解,我不能理解的就靠收集网上的资料了,引用会注明来源和作者,如有侵权请联系我删除。那么废话…

  • Docker技术( 容器虚拟化技术 )「建议收藏」

    Docker虚拟化容器技术第一章Docker简介诞生背景Docker介绍虚拟机技术容器虚拟化技术官方网址第二章Docker安装前提条件安装DockerDocker底层原理Docker结构图工作原理Docker为什么比VM快第三章Docker常用命令帮助命令镜像命令容器命令第一章Docker简介诞生背景一款产品从开发到上线,从操作系统,到运行环境,再到应用配置。作为开发…

  • CentOS 安装 semanage 命令

    CentOS 安装 semanage 命令

    2021年10月18日
  • navicat15激活码最新【最新永久激活】

    (navicat15激活码最新)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html70YZDJVTFP-eyJsaWNlbnNlSW…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号