发表新帖
发表新帖

Check if page gets reloaded or refreshed in JavaScript

前端 未结
关注
12 2876
遇见更好的自我
遇见更好的自我 2020-11-21 22:57

I want to check when someone tries to refresh a page.

For example, when I open a page nothing happens but when I refresh the page it should display an alert.

相关标签:
12条回答
  • 误落风尘
    2020-11-21 23:23

    Store a cookie the first time someone visits the page. On refresh check if your cookie exists and if it does, alert.

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

    and in your body tag:

    <body onload="checkFirstVisit()">
    0 讨论(0)
  • 深忆病人
    2020-11-21 23:23

    Here is a method that is supported by nearly all browsers:

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

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

    It uses SessionStorage to check if the page is opened the first time or if it is refreshed.

    0 讨论(0)
  • 灰色年华
    2020-11-21 23:25

    ⚠️⚠️⚠️ window.performance.navigation.type is deprecated, pls see Илья Зеленько's answer

    A better way to know that the page is actually reloaded is to use the navigator object that is supported by most modern browsers.

    It uses the Navigation Timing API.

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

    source : https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API

    0 讨论(0)
  • [愿得一人]
    2020-11-21 23:26 
    if(sessionStorage.reload) { 
   sessionStorage.reload = true;
   // optionnal
   setTimeout( () => { sessionStorage.setItem('reload', false) }, 2000);
} else {
   sessionStorage.setItem('reload', false);
}
    0 讨论(0)
  • 甜味超标
    2020-11-21 23:32

    I have wrote this function to check both methods using old window.performance.navigation and new performance.getEntriesByType("navigation") in same time:

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

    Result description:

    0: clicking a link, Entering the URL in the browser's address bar, form submission, Clicking bookmark, initializing through a script operation.

    1: Clicking the Reload button or using Location.reload()

    2: Working with browswer history (Bakc and Forward).

    3: prerendering activity like <link rel="prerender" href="//example.com/next-page.html">

    4: any other method.

    0 讨论(0)
  • 粉色の甜心
    2020-11-21 23:36

    I found some information here Javascript Detecting Page Refresh

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

window.onbeforeunload = UnLoadWindow;
    0 讨论(0)
 看不清?
提交回复
热议问题