大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全家桶1年46,售后保障稳定
beforeunload事件
简介
当窗口,文档及其资源即将卸载时,将触发该事件。该文档仍然可见,此时事件仍可取消。
如果为
returnValue
Event属性分配了一个字符串,则会出现一个对话框,要求用户确认离开该页面(参见下面的示例)。IE浏览器在对话框中显示返回的字符串,但其他浏览器会显示自己的消息。如果未提供任何值,则以静默方式处理事件。
注意:为了防止不需要的弹出窗口,浏览器可能不会显示在beforeunload事件处理程序中创建的提示,除非页面已与之交互,甚至根本不显示它们。
PS:如果进入当前页面后没有用户没有与页面进行任何交互(比如鼠标在页面上点击),直接关掉或者刷新当前页面是没有弹窗提示。一定要与页面进行交互之后,才能在页面卸载的时候弹出确认离开的对话框;没有进行页面交互,也是会触发beforeunload事件的,只是不会弹出确认离开的对话框。
语法
//通用
window.onbeforeunload = function (event) {};
//IE9+
window.addEventListener("beforeunload", function (event) {});
beforeunload事件对象属性
属性 | 类型 | 描述 |
---|---|---|
target 只读 |
EventTarget |
事件目标(DOM树中最顶层的目标)。 |
type 只读 |
DOMString |
事件的类型。 |
bubbles 只读 |
Boolean |
事件通常会冒泡吗? |
cancelable 只读 |
Boolean |
可以取消活动吗? |
returnValue [1] |
DOMString |
事件的当前返回值(显示用户的消息)。 |
[1]为了防止网站欺骗用户,谷歌浏览器和火狐浏览器已经废弃设置returnValue
,谷歌浏览器和火狐浏览器弹窗只显示各自系统通用字符串,忽略自定义字符串,IE依然可以显示自定义字符串,Edge(IE12+)依然可以显示自定义字符串。
PS:不用再怀疑为什么设置了returnValue没有效果了。
Google声明:
示例
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();
});
事件触发场景
- 关闭浏览器窗口
- 通过地址栏或收藏夹前往其他页面的时候
- 点击返回,前进,刷新,主页其中一个的时候
- 点击 一个前往其他页面的url连接的时候
- 使用document.write() 方法(输出内容)
- 使用document.open() 打开一个新的空白文档
- 使用document.close() 方法可关闭一个由open()方法打开的输出流,并显示选定的数据。
- 当使用window.open() 打开一个页面,并把本页的window的名字传给要打开的页面的时候。
- 使用window.close() 关闭页面的时候
- 重新赋予window.location.href的值的时候。
- 通过input type=”submit”按钮提交一个具有指定action的表单的时候。
- 使用form.submit() 提交表单的时候
应用场景
onbeforeunload对话框用于现代Web上的两件事:
- 防止用户无意中丢失数据。
- 欺骗用户。
参考:
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账号...