新标准2018、2019（PerformanceNavigationTiming）

Question

我想检查某人是否有人试图刷新页面。

例如，当我打开一个页面时没有任何反应，但是当我刷新页面时会返回一个警告。

Answer 1

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

＆＃13;

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

＆＃13;

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

Answer 2

第一步是检查sessionStorage是否有某些预先定义的值，如果它存在则提示用户：

if (sessionStorage.getItem("is_reloaded")) alert('Reloaded!');

第二步是将sessionStorage设置为某个值（例如true）：

sessionStorage.setItem("is_reloaded", true);

会话值一直保持到页面关闭，因此仅当页面重新加载到包含该站点的新选项卡中时才会起作用。您也可以按照相同的方式保持重新加载计数。

Answer 3

首次有人访问该网页时存储Cookie。在刷新时检查您的cookie是否存在以及是否存在，请提醒。

function checkFirstVisit() {
  if(document.cookie.indexOf('mycookie')==-1) {
    // cookie doesn't exist, create it now
    document.cookie = 'mycookie=1';
  }
  else {
    // not first visit, so alert
    alert('You refreshed!');
  }
}

并在你的身体标签中：

<body onload="checkFirstVisit()">

Answer 4

新标准2018、2019（PerformanceNavigationTiming）

在Navigation Timing Level 2规范中，不推荐使用
window.performance.navigation属性。请改用PerformanceNavigationTiming界面。

PerformanceNavigationTiming.type

这是experimental technology。

在生产中使用Browser compatibility table之前，请仔细检查。

2018年11月14日支持：

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

导航-通过单击链接，在浏览器的地址栏中输入URL，提交表单或通过脚本操作（除了下面列出的reload和back_forward进行初始化）开始导航。< / p>

重新加载-通过浏览器的重新加载操作或location.reload()进行导航。

back_forward -通过浏览器的历史记录遍历操作进行导航。

投稿人-导航由prerender hint启动。

此属性为只读。

以下示例说明了此属性的用法。

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

Answer 5

我在Javascript Detecting Page Refresh找到了一些信息。他的第一个建议是使用隐藏字段，这些字段往往通过页面刷新来存储。

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>

Answer 6

如果

event.currentTarget.performance.navigation.type

返回

0 =＆gt;用户只需键入一个URL 1 =＆gt;页面重新加载
2 =＆gt;单击后退按钮。

Answer 7

我在这里找到了一些信息Javascript Detecting Page Refresh

function UnLoadWindow() {
    return 'We strongly recommends NOT closing this window yet.'
}

window.onbeforeunload = UnLoadWindow;

Answer 8

我编写了此函数来同时使用旧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：：单击“重新加载”按钮或使用Location.reload()

2 ：处理浏览历史记录（Bakc和Forward）。

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

4 ：任何其他方法。

Answer 9

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

Answer 10

以下是几乎所有浏览器都支持的方法：

if (sessionStorage.getItem('reloaded') != null) {
    console.log('page was reloaded');
} else {
    console.log('page was not reloaded');
}

sessionStorage.setItem('reloaded', 'yes'); // could be anything

它使用 SessionStorage 来检查页面是第一次打开还是刷新。

Answer 11

<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>

Answer 12

在控制台中附加以下脚本：

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

Answer 13

 document.addEventListener("keydown", (e)=>{
   if (e.keyCode === 116) {
     e.preventDefault();

      // your code here
      // var r = confirm("Reload!");
      // if (r == true)
      //  window.location.reload();
   }
 })

这里我们使用了事件侦听器“keydown”，因为 F1 - F12 键在浏览器上不可用于“keypress”。
116 是“F5”的键码。 Check here
'preventDefault()' 将停止按下的键的默认功能。当按下 F5 时，它会在此处停止直接刷新。
然后添加您的代码。
确认警报后，'location.reload()' 将重新加载页面

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

13 个答案:

新标准2018、2019（PerformanceNavigationTiming）

PerformanceNavigationTiming.type

2018年11月14日支持：

以下示例说明了此属性的用法。