检查页面是否在 JavaScript 中重新加载或刷新2018-至今的新标准（性能导航时间）

javascript page-refresh

2022-08-30 00:34:22

我想检查有人何时尝试刷新页面。

例如，当我打开一个页面时，没有任何反应，但当我刷新页面时，它应该显示一个警报。

答案 1

⚠️⚠️⚠️ is deprecated，請參閱 Илья Зеленько's answerwindow.performance.navigation.type

了解页面实际重新加载的更好方法是使用大多数现代浏览器支持的 navigator 对象。

//check for Navigation Timing API support
if (window.performance) {
  console.info("window.performance works fine on this browser");
}
console.info(performance.navigation.type);
if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {
  console.info( "This page is reloaded" );
} else {
  console.info( "This page is not reloaded");
}

来源： https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API

答案 2

2018-至今的新标准（性能导航时间）

window.performance.navigation属性在导航计时级别 2 规范中已弃用。请改用性能导航优化接口。

性能导航时间.类型

这是一项实验性技术。

在生产环境中使用浏览器兼容性表之前，请仔细检查该表。

检查页面是否在 JavaScript 中重新加载或刷新

const pageAccessedByReload = (
  (window.performance.navigation && window.performance.navigation.type === 1) ||
    window.performance
      .getEntriesByType('navigation')
      .map((nav) => nav.type)
      .includes('reload')
);

alert(pageAccessedByReload);

支持日期 2021-11-09

type 只读属性返回一个表示导航类型的字符串。该值必须是下列值之一：

导航 — 导航开始于单击链接、在浏览器的地址栏中输入 URL、提交表单或通过脚本操作（如下面列出的重新加载和back_forward以外的脚本操作进行初始化。
reload — 导航是通过浏览器的重新加载操作或 location.reload（）完成的。
back_forward — 导航是通过浏览器的历史记录遍历操作进行的。
预呈现 — 导航由预呈现提示启动。

此属性为只读。

下面的示例阐释了此属性的用法。

function print_nav_timing_data() {
  // Use getEntriesByType() to just get the "navigation" events
  var perfEntries = performance.getEntriesByType("navigation");

  for (var i=0; i < perfEntries.length; i++) {
    console.log("= Navigation entry[" + i + "]");
    var p = perfEntries[i];
    // dom Properties
    console.log("DOM content loaded = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
    console.log("DOM complete = " + p.domComplete);
    console.log("DOM interactive = " + p.interactive);
 
    // document load and unload time
    console.log("document load = " + (p.loadEventEnd - p.loadEventStart));
    console.log("document unload = " + (p.unloadEventEnd - p.unloadEventStart));
    
    // other properties
    console.log("type = " + p.type);
    console.log("redirectCount = " + p.redirectCount);
  }
}