HTML | DOM onpageshow 事件(1)

📌 相关文章

📜 HTML | DOM onpageshow 事件(1)

📅 最后修改于: 2023-12-03 15:15:35.453000 🧑 作者: Mango

HTML | DOM onpageshow 事件

介绍

onpageshow 事件在文档显示在窗口中时触发。这个事件与 onload 事件不同之处在于它在每次页面重新加载时都会触发。

语法

window.onpageshow = function(event) { ... }

参数

event 是一个 Event 对象，它描述了事件的细节。

示例代码

下面的例子演示了如何使用 onpageshow 事件。

<!DOCTYPE html>
<html>
  <head>
    <title>onpageshow Demo</title>
  </head>
  <body>
    <p>请关闭该网页，然后重新打开。</p>

    <script>
      window.onpageshow = function(event) {
        if (event.persisted) {
          alert("页面来自缓存");
        } else {
          alert("页面重新加载");
        }
      };
    </script>
  </body>
</html>

上述代码中，当页面被重新加载时，onpageshow 事件被触发。如果页面来自缓存，event.persisted 属性会被设置为 true。

支持的浏览器

onpageshow 事件在所有现代浏览器中都得到支持。

总结

onpageshow 事件允许开发人员在文档重新加载时执行一些操作。与 onload 不同的是，onpageshow 每次重新加载时都会触发。因此，如果您想在页面重新加载时运行某些代码，那么 onpageshow 事件是正确的选择。