Check if page gets reloaded or refreshed in JavaScript

Question

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

User · Answer

I found some information here Javascript Detecting Page Refresh  function UnLoadWindow         return  We strongly recommends NOT closing this window yet      window onbeforeunload   UnLoadWindow

User · Answer

if sessionStorage reload        sessionStorage reload   true        optionnal    setTimeout       gt    sessionStorage setItem  reload   false     2000     else      sessionStorage setItem  reload   false

User · Answer

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    lt body onload  checkFirstVisit    gt

User · Answer

if   event currentTarget performance navigation type   returns   0    user just typed in an Url  1    page reloaded 2    back button clicked

User · Answer

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

User · Answer

lt script gt           var currpage      window location href      var lasturl       sessionStorage getItem  quot last url quot         if lasturl    null    lasturl length     0    currpage     lasturl            sessionStorage setItem  quot last url quot   currpage           alert  quot New page loaded quot         else          alert  quot Refreshed Page quot              lt  script gt

User · Answer

New standard 2018-now  PerformanceNavigationTiming   window performance navigation property is deprecated in the Navigation Timing Level 2 specification  Please use the PerformanceNavigationTiming interface instead   PerformanceNavigationTiming type  This is an experimental technology   Check the Browser compatibility table carefully before using this in production   Support on 2019-07-08    The type read-only property returns a string representing the type of navigation  The value must be one of the following    navigate     Navigation started by clicking a link  entering the URL in the browser s address bar  form submission  or initializing through a script operation other than reload and back forward as listed below  reload     Navigation is through the browser s reload operation or location reload    back forward     Navigation is through the browser s history traversal operation  prerender     Navigation is initiated by a prerender hint    This property is Read only   The following example illustrates this property s usage   function print nav timing data          Use getEntriesByType   to just get the  navigation  events   var perfEntries   performance getEntriesByType  navigation       for  var i 0  i  lt  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

User · Answer

I found some information here Javascript Detecting Page Refresh   His first recommendation is using hidden fields  which tend to be stored through page refreshes     x000D   x000D  function checkRefresh     x000D      if  document refreshForm visited value          x000D             This is a fresh page load x000D          document refreshForm visited value    1   x000D             You may want to add code here special for x000D             fresh page loads x000D        else   x000D             This is a page refresh x000D             Insert code here representing what to do on x000D             a refresh x000D        x000D    x000D   lt html gt  x000D   x000D   lt body onLoad  JavaScript checkRefresh     gt  x000D       lt form name  refreshForm  gt  x000D           lt input type  hidden  name  visited  value      gt  x000D       lt  form gt  x000D   x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

First step is to check sessionStorage for some pre-defined value and if it exists alert user   if  sessionStorage getItem  is reloaded    alert  Reloaded       Second step is to set sessionStorage to some value  for example true    sessionStorage setItem  is reloaded   true     Session values kept until page is closed so it will work only if page reloaded in a new tab with the site  You can also keep reload count the same way

User · Answer

Append the below Script in Console  window addEventListener  quot beforeunload quot   function event          console log  quot The page is redirecting quot                   debugger

User · Answer

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   x000D   x000D    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      x000D   x000D   x000D   source   https   developer mozilla org en-US docs Web API Navigation timing API

User · Answer

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  lt link rel  prerender  href    example com next-page html  gt   4  any other method

[javascript] Check if page gets reloaded or refreshed in JavaScript

Examples related to javascript

Examples related to page-refresh