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

当有人试图刷新页面时，我想检查一下。

例如，当我打开一个页面什么都没有发生，但当我刷新页面时，它应该显示一个警告。

当前回答

在控制台添加以下脚本:

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

2020-11-18 06:35:44

其他回答

我在JavaScript检测页面刷新中找到了一些信息。他的第一个建议是使用隐藏字段，这些字段往往是通过页面刷新存储的。

function checkRefresh() { if (document.refreshForm.visited.value == "") { // This is a fresh page load document.refreshForm.visited.value = "1"; // You may want to add code here special for // fresh page loads } else { // This is a page refresh // Insert code here representing what to do on // a refresh } } <html> <body onLoad="JavaScript:checkRefresh();"> <form name="refreshForm"> <input type="hidden" name="visited" value="" /> </form> </body> </html>

2011-02-15 14:43:31

新标准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);
  }
}

2018-11-14 19:35:40

if(sessionStorage.reload) { 
   sessionStorage.reload = true;
   // optionnal
   setTimeout( () => { sessionStorage.setItem('reload', false) }, 2000);
} else {
   sessionStorage.setItem('reload', false);
}

2020-01-02 10:53:53

<script>
    
    var currpage    = window.location.href;
    var lasturl     = sessionStorage.getItem("last_url");

    if(lasturl == null || lasturl.length === 0 || currpage !== lasturl ){
        sessionStorage.setItem("last_url", currpage);
        alert("New page loaded");
    }else{
        alert("Refreshed Page");  
    }

</script>

2020-10-12 15:15:41

这个实现帮助了我:

来自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';

2022-10-27 10:50:14

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

推荐文章

最新文章

标签