📌  相关文章
📜  HTML | DOM onpagehide 事件(1)

📅  最后修改于: 2023-12-03 14:41:48.439000             🧑  作者: Mango

HTML | DOM onpagehide 事件

简介

onpagehide 事件是一种在用户离开页面时触发的事件。它是 HTML DOM (文档对象模型) 中的一个事件类型，可以用于在用户关闭或离开页面时执行相应的操作。该事件通常用于保存用户数据、执行清理操作或向服务器发送请求。

语法
window.onpagehide = function(){ ... }
  • window：代表当前窗口对象。
  • onpagehide：表示在用户离开页面时触发的事件。
  • function() { ... }：事件的处理函数，可以是内嵌函数或指定外部函数。
使用示例
<!DOCTYPE html>
<html>
<head>
  <title>onpagehide 示例</title>
</head>
<body>
  <script>
    // 定义 onpagehide 事件处理函数
    window.onpagehide = function(event) {
      // 保存用户数据
      localStorage.setItem('username', 'John Doe');
      
      // 向服务器发送请求，执行清理操作
      fetch('/logout', { method: 'POST' })
        .then(response => {
          console.log('成功注销用户');
        })
        .catch(error => {
          console.error('注销失败：' + error);
        });
    };
  </script>
</body>
</html>

上述示例中，当用户关闭页面或跳转到其他页面时，onpagehide 事件将触发。在该事件的处理函数中，我们利用 localStorage API 将当前用户名保存在本地浏览器中，随后通过 fetch API 向服务器发送 POST 请求以注销用户并执行相关清理操作。当请求成功时，会在控制台打印成功注销用户的信息，失败时则会打印错误信息。

兼容性

onpagehide 事件兼容大多数现代浏览器，包括 Chrome、Firefox、Safari 和 Edge 等。然而，Internet Explorer 不支持此事件。为了确保代码在不同浏览器上的正常运行，建议使用 beforeunload 事件作为兼容方案，因为它在大多数浏览器上都支持。

相关事件
  • onpageshow：当用户浏览到页面时触发，可用于执行与用户浏览行为相关的操作。
  • onunload：当页面被卸载时触发，可以用于执行一些清理操作。

更多关于 HTML DOM 事件的信息，请参考 HTML DOM 事件参考手册。