新标准2018-now (PerformanceNavigationTiming)

window.performance.navigation属性在2级导航时序规范中已弃用。请使用PerformanceNavigationTiming接口。

PerformanceNavigationTiming.type

这是一项实验技术。

在生产中使用此功能之前，请仔细检查浏览器兼容性表。

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

const pageAccessedByReload = ( (window.performance。Navigation && window.performance.navigation.type === 1) || window.performance .getEntriesByType(导航) .map((nav) => nav.type) 其中包括(“重载”) ）; 警报(pageAccessedByReload);

2021-11-09支持

type只读属性返回表示导航类型的字符串。必须为以下值之一:

导航——通过点击链接开始导航，在浏览器地址栏中输入URL，提交表单，或者通过脚本操作(而不是下面列出的reload和back_forward)初始化。 重载——导航是通过浏览器的重载操作或location.reload()完成的。 back_forward -导航是通过浏览器的历史遍历操作。 prerender -导航由一个prerender提示启动。

此属性为只读。

下面的例子说明了这个属性的用法。

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);
  }
}

我写了这个函数来同时检查两个方法，使用旧的window.performance.navigation和新的performance.getEntriesByType("navigation"):

function navigationType(){

    var result;
    var p;

    if (window.performance.navigation) {
        result=window.performance.navigation;
        if (result==255){result=4} // 4 is my invention!
    }

    if (window.performance.getEntriesByType("navigation")){
       p=window.performance.getEntriesByType("navigation")[0].type;

       if (p=='navigate'){result=0}
       if (p=='reload'){result=1}
       if (p=='back_forward'){result=2}
       if (p=='prerender'){result=3} //3 is my invention!
    }
    return result;
}

结果描述:

0:点击链接，在浏览器地址栏输入URL，提交表单，点击书签，通过脚本操作初始化。

1:点击Reload按钮或使用Location.reload()

2:使用浏览器历史记录(Bakc和Forward)。

3:预渲染活动，如<link rel="prerender" href="//example.com/next-page.html">

4:任何其他方法。

if

event.currentTarget.performance.navigation.type

返回

0 =>用户刚刚输入了一个Url 1 =>页面重新加载 2 =>返回按钮单击。

在控制台添加以下脚本:

window.addEventListener("beforeunload", function(event) { 
     console.log("The page is redirecting")           
     debugger; 
});

这个实现帮助了我:

来自MDN参考2022:导航授时级别2规范

const navigationType = 
    (window.performance.getEntriesByType('navigation')
        [0] as PerformanceNavigationTiming).type;

const isPageReload = navigationType === 'reload';
const isNavigation = navigationType === 'navigate';
const isBackForwarad = navigationType === 'back_forward';
const isPrerender = navigationType === 'prerender';

这里没有提到一个简单的解决方案(不依赖已弃用的window.performance.navigation):

使用窗口。onbeforeunload在用户离开页面(可能会刷新页面)时存储当前页面的时间和URL(在localstorage中)。

window.onbeforeunload = function(e)
{
    localStorage.setItem('reload-url', window.location.href);
}

然后使用window。Onload从本地存储中获取这些值。

window.onload = function(e)
{
    if (localStorage.getItem('reload-url') != null)) 
    {
        if (window.location.href == localStorage.getItem('reload-url'))
        {
            console.log('Reload');
        }
    }
}

如果最近的URL与存储的URL匹配，如果存储的时间与当前时间匹配(可能有一个微小的偏移)，那么它是用户重新加载的页面。