JavaScript中的window.onbeforeunload

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/10/05/JavaScript%E4%B8%AD%E7%9A%84window-onbeforeunload/

摘要

本文主要讲述了：

作用
测试文档
测试结果

正文

作用

监听试图离开当前网页的行为（刷新当前网页、关闭当前网页、跳转到新网页）
如果开发者阻止了beforeunload事件的默认行为，那么浏览器将会显示系统弹窗供用户二次确认是否离开当前网页

注意：

HTML 标准禁止开发者在beforeunload事件的回调函数中使用alert()、confirm()、prompt()
Webkit 系的浏览器没有遵循 HTML 标准，不支持通过event.preventDefault()阻止beforeunload的默认行为，而是通过向event.returnValue赋值实现
在 Firefox 浏览器下，若用户在试图刷新当前网页之前，没有点击过当前网页的任何内容，beforeunload事件不会触发
除了 IE 浏览器之外，若用户在试图关闭当前网页之前，没有点击过当前网页的任何内容，beforeunload事件不会触发
除了 IE 浏览器之外，若用户在试图跳转到新网页之前，没有点击过当前网页的任何内容，beforeunload事件不会触发
history.pushState()或history.replaceState()不会触发beforeunload事件

测试文档

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" />
    <script>
      window.addEventListener('beforeunload', function (event) {
        event.preventDefault();
      });
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" />
    <script>
      window.addEventListener('beforeunload', function (event) {
        event.returnValue = 'placeholder';
      });
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" />
    <script>
      window.addEventListener('beforeunload', function (event) {
        return 'placeholder';
      });
    </script>
  </body>
</html>