HTML 页面卸载时如何执行脚本

在网页开发过程中，我们常常会遇到需要在 HTML 页面卸载时执行特定脚本的情况。这一功能在很多场景下都非常实用，比如记录用户离开页面的行为、保存未提交的数据等。那么，如何实现这一功能呢？

在 HTML 中，我们主要借助 beforeunload 和 unload 这两个事件来达成目的。

beforeunload 事件会在页面即将卸载之前触发。它给开发者提供了一个机会，询问用户是否确定要离开当前页面。例如，当用户在表单中输入了部分内容但尚未提交时，通过 beforeunload 事件可以弹出提示框，提醒用户可能丢失未保存的数据。实现代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>HTML 页面卸载脚本</title>
</head>

<body>
  <script>
    window.addEventListener('beforeunload', function (e) {
      // 这里的返回值会显示在确认框中
      e.returnValue = '您有未保存的数据，确定要离开吗？';
      return '您有未保存的数据，确定要离开吗？';
    });
  </script>
</body>

</html>

需要注意的是，不同浏览器对 beforeunload 事件的处理可能略有差异，但基本功能一致。

而 unload 事件则在页面开始卸载时触发，不过它无法阻止页面的卸载过程。这个事件常用于执行一些无需用户确认的操作，比如发送请求到服务器记录用户离开页面的时间等。示例代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>HTML 页面卸载脚本</title>
</head>

<body>
  <script>
    window.addEventListener('unload', function () {
      // 这里可以执行发送请求等操作
      console.log('页面开始卸载');
    });
  </script>
</body>

</html>

在实际应用中，要根据具体需求合理选择使用 beforeunload 和 unload 事件。由于浏览器的安全策略等原因，在这些事件中执行复杂的操作可能会受到一定限制。

掌握 HTML 页面卸载时执行脚本的方法，能为用户提供更友好、更智能的网页交互体验，让网页开发更加完善和高效。无论是优化用户体验还是满足业务逻辑需求，这都是一项值得深入了解和应用的技术。