Window：pageshow 事件

当浏览器由于导航显示窗口的文档时，pageshow 事件将发送到 Window。

这包括

最初加载页面
从同一窗口或选项卡中的另一个页面导航到该页面
在移动操作系统上恢复冻结的页面
使用浏览器的向前或向后按钮返回页面

注意：在初始页面加载期间，pageshow 事件在 load 事件之后触发。

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。

addEventListener("pageshow", (event) => {});
onpageshow = (event) => {};

事件类型

一个 PageTransitionEvent。继承自 Event。

事件属性

PageTransitionEvent.persisted 只读: 指示文档是否从缓存中加载。

事件处理程序别名

除了 Window 接口之外，事件处理程序属性 onpageshow 也在以下目标上可用

示例

此示例为数组 events 中列出的事件设置事件处理程序。处理程序 eventLogger() 将发生的事件类型记录到控制台，并在 pageshow 和 pagehide 事件上包含 persisted 标志的值。

JavaScript

const events = ["pagehide", "pageshow", "unload", "load"];

const eventLogger = (event) => {
  switch (event.type) {
    case "pagehide":
    case "pageshow": {
      let isPersisted = event.persisted ? "persisted" : "not persisted";
      console.log(`Event: ${event.type} - ${isPersisted}`);
      break;
    }
    default:
      console.log(`Event: ${event.type}`);
      break;
  }
};

events.forEach((eventName) => window.addEventListener(eventName, eventLogger));

HTML

html

<p>
  Open the console and watch the output as you navigate to and from this page.
  Try loading new pages into this tab, then navigating forward and backward
  through history, noting the events' output to the log.
</p>

结果

规范

规范
HTML 标准 # event-pageshow

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

页面隐藏