如何检查页面是否使用js重新加载

Question

您现在如何检查页面是否重新加载？

以前是这样的：

//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/Performance/navigation

然后我检查了替换：https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming

即使阅读了它，我仍然不太清楚如何才能做到这一点。那么检查页面是否刷新的新方法是如何工作的？

看完后我也试了一下：

    if (PerformanceNavigationTiming.type == "reload") {
    alert('page reloaded')
    }

但随后将不会显示警报。

之后我尝试了这个：

    if (PerformanceNavigationTiming.type == PerformanceNavigationTiming.TYPE_RELOAD) {
    alert('page reloaded')
    }

但随后它也会在不刷新页面的情况下显示警报。

然后我尝试的最后一件事：

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

但这也给我一个警告，当它没有重新加载时为 false，当它重新加载时为 true。我只需要在重新加载页面时发出警报。

Answer 1

我终于找到了解决办法：

  const pageAccessedByReload = (
      (PerformanceNavigationTiming && PerformanceNavigationTiming.TYPE === 1) ||
        window.performance
          .getEntriesByType('navigation')
          .map((nav) => nav.type)
          .includes('reload')
    );
    
    if (pageAccessedByReload == true) {
    alert(pageAccessedByReload);
  }

现在只有刷新页面才会显示

Answer 2

阅读新的 API 文档时一定要注意，输入 PerformanceNavigationTiming 是字符串而不是数字，因此正确的方法是：

if (window.PerformanceNavigationTiming) {
  console.info("window.performance works fine on this browser");
  
  if (PerformanceNavigationTiming.type === "reload") {
    console.info("This page is reloaded");
  } else {
    console.info("This page is not reloaded");
  }
}

如何检查页面是否使用js重新加载

How to get check if a page gets reloaded with js

javascript

refresh