在页面离开前提醒你的beforeunload事件
时间:2022-07-28
本文章向大家介绍在页面离开前提醒你的beforeunload事件,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
问题描述
有些需要填写用户信息的界面,当用户点击返回,或者刷新界面,关闭界面的时候,需要及时提醒用户当前的页面填写了内容,如果返回或者刷新的话,会导致内容丢失。然后让用户自行决定后续的操作。
解决办法
beforeunload
事件就可以帮你做到这件事。
当浏览器窗口关闭
或者刷新
时,会触发beforeunload
事件。当前页面不会直接关闭,可以点击确定按钮关闭或刷新,也可以取消。
该事件使网页能够触发一个确认对话框
,询问用户是否真的要离开该页面。如果用户确认,浏览器将导航到新页面,否则导航将会取消。
根据规范,要显示确认对话框,事件处理程序需要在事件上调用preventDefault()
。
注意,并非所有浏览器都支持此方法,而有些浏览器需要事件处理程序实现两个遗留方法中的一个作为代替:
- 将字符串分配给事件的
returnValue
属性 - 从事件处理程序返回一个字符串。
这两个方法以前是用于自定义确认对话框要显示的文本信息,现在已经废弃,且大部分浏览器不支持自定义对话框文本消息。
代码示例
window.addEventListener('beforeunload', (event) => {
// 显示确认对话框
event.preventDefault();
// 为了兼容处理,Chrome需要设置returnValue
event.returnValue = '';
});
特别提醒
- 为避免意外弹出窗口,
除非页面已交互(鼠标点击了此页面)
,否则在刷新或者关闭的时候,不会触发beforeunload事件。 - 确认对话框不可以显示自定义字符串。某些浏览器以前可以显示用户自定义消息。但是,
此方法已被弃用
,并且在大多数浏览器中不再支持。
- 机器学习算法实现解析——libFM之libFM的训练过程之SGD的方法
- 虚拟化平台cloudstack(3)——安装(下)
- 机器学习算法实现解析——libFM之libFM的训练过程概述
- 虚拟化平台cloudstack(4)——几个异常
- Golang语言 xml解析实例
- 机器学习算法实现解析——libFM之libFM的模型处理部分
- Go语言使用protobuf数据通信--师出同门,懂的人理解吧
- 虚拟化平台cloudstack(6)——使用maven:jetty调试
- 虚拟化平台cloudstack(7)——新版本的调试
- 一行代码,Pandas秒变分布式,快速处理TB级数据
- 机器学习算法实现解析——word2vec源码解析
- 从零开始创建一个基于Go语言的web service
- 转--Golang项目邮件发送模块代码分享
- 虚拟化平台cloudstack(8)——从UI开始
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Flink Timer(定时器)机制及实现详解
- android:运行时权限工具类的封装
- Android:非Activity跳转Activity时要加FLAG?
- Java自动化测试(接口鉴权 16)
- Android:Tools命名空间原来是有大用处的
- Android:无线调试就是这么简单
- Java自动化测试(回写与断言 17)
- 一篇就够——Kotlin快速入门
- 微信大牛教你深入了解数据库索引
- SqlServer 资源消耗查询
- Android:检查通知权限并跳转到通知设置界面
- OpenShift应用发布和运维设计
- Android:依赖Module的问题汇总
- Android:加载网图时精确获取图片格式
- Android:8.0中未知来源安装权限变更