在用户关闭页面时,提示用户有内容未保存-论onbeforeunload事件的用法

简介: 在用户关闭页面时,提示用户有内容未保存-论onbeforeunload事件的用法

onbeforeunload该事件在火狐、谷歌中默认不生效,除非你打开控制台。

可以间接实现,监听页面中输入框是否有值,如果有,则触发,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<input type="text" id="name">
<script>
        const beforeUnloadListener = (event) => {
          event.preventDefault();
          return event.returnValue = "Are you sure you want to exit?";
        };
        const nameInput = document.querySelector("#name");
        nameInput.addEventListener("input", (event) => {
          if (event.target.value !== "") {
            addEventListener("beforeunload", beforeUnloadListener, {capture: true});
          } else {
            removeEventListener("beforeunload", beforeUnloadListener, {capture: true});
          }
        });
</script>
</body>
</html>
效果:

原理:

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

此事件使网页能够触发确认对话框,询问用户是否真的要离开该页面。如果用户确认,浏览器导航到新页面,否则取消导航。

如果将事件直接绑定到window或body中,则在谷歌和火狐中不会触发,因为用户可能与页面没有任何交互,浏览器会忽略,就像浏览器不支持自动播放音视频那样,这时可以在页面中添加一个输入框,然后事件监听该输入框,如果输入框值为空,再触发该事件。

使用说明

该beforeunload事件遭受与该事件相同的问题unload。

特别是在移动设备上,beforeunload事件不会被可靠地触发。例如,beforeunload在以下场景中根本不会触发事件:

  1. 移动用户访问您的页面。
  2. 然后用户切换到不同的应用程序。
  3. 稍后,用户从应用管理器关闭浏览器。

建议开发者beforeunload只在这种场景下监听,并且只有在实际有未保存的更改时才监听,以尽量减少对性能的影响。

相关文章
|
6天前
layui根据数据状态判断显示内容
layui根据数据状态判断显示内容
|
7月前
|
消息中间件 架构师 数据处理
处理数据时点按钮,数据完数据时会自动执行的问题
处理数据时点按钮,数据完数据时会自动执行的问题
|
9月前
|
JavaScript 前端开发
如何阻止在 vue项目中快速双击俩次新增/编辑连续发送俩次请求
如何阻止在 vue项目中快速双击俩次新增/编辑连续发送俩次请求
53 0
|
10月前
element ui 上传图片之后跳转、刷新、保存,预览和删除丢失问题
这问题困惑了我好久,在官方的element ui 的组件库中,直接拿来使用的话,只有当前显示效果,一旦刷新页面或者保存之后,就会丢失,预览和删除功能。当保存后,保存到后端接口,再次查看,图片是能渲染出来,但是由于保存页面刷新,随之整个上传过程失败,而查看所拿到的图片只是一张静态图片,要想再次预览和查看,需要重新选中上传
154 0
|
10月前
|
PHP
php常用自建函数学习(4):ShowMsg返回弹出信息并进行返回、跳转、刷新等操作
php常用自建函数学习(4):ShowMsg返回弹出信息并进行返回、跳转、刷新等操作
78 0
|
11月前
element close事件关闭表单,数据替换掉原始列表的数据bug解决
element close事件关闭表单,数据替换掉原始列表的数据bug解决
42 0
防止用户复制管理员网址进入页面、设置禁用隐藏按钮权限以及防止修改禁用按钮权限
防止用户复制管理员网址进入页面、设置禁用隐藏按钮权限以及防止修改禁用按钮权限
91 0
|
JSON 小程序 JavaScript
【小程序】页面事件
【小程序】页面事件
124 0
【小程序】页面事件
|
前端开发
前端工作总结127-删除做个判断操作 成功删除 取消取消
前端工作总结127-删除做个判断操作 成功删除 取消取消
68 0
SAP 操作,弹出报错 - 已根据规则拒绝服务器触发的操作,是否要查看上个通讯步骤中触发的操作列表 -
SAP 操作,弹出报错 - 已根据规则拒绝服务器触发的操作,是否要查看上个通讯步骤中触发的操作列表 -
SAP 操作,弹出报错 - 已根据规则拒绝服务器触发的操作,是否要查看上个通讯步骤中触发的操作列表 -