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

前端三评

已于 2022-09-07 14:17:16 修改

阅读量1k

点赞数

分类专栏： JS 文章标签：前端 javascript 开发语言

于 2022-09-07 13:48:07 首次发布

本文链接：https://blog.csdn.net/imqdcn/article/details/126744013

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>