browser - Detect a hard reload with JavaScript - Stack Overflow

admin管理员组

文章数量:1410706

For clarification: I am not trying to differentiate between a refresh and a reload, hence this is not a duplicate of refresh vs reload. I am trying to find out if there is a way to detect when a user triggers a hard reload instead of a normal reload. I am asking because I want to execute some code prior to a hard reload only.

---

Using JavaScript, via the browsers' reload button, or by a shortcut like Shift+Ctrl+R it is possible to perform a hard reload of a browser tab. Is it possible to detect such a hard reload with JavaScript and if so how?

I know one can detect when a normal reload event is triggered with the onbeforeunload event and I can find out the navigation type to differentiate between a refresh and a reload but I am unable to detect a hard reload.

So far I'am using the following JS code to detect a reload:

window.addEventListener('beforeunload', function (e) {
  // Cancel the event
  e.preventDefault();
  // Chrome requires returnValue to be set
  e.returnValue = '';

  // For older browsers
  console.log('Is reloading?', event.currentTarget.performance.navigation.type === 1);

  // For modern browsers
  const perfEntries = performance.getEntriesByType("navigation");

  for (let i = 0; i < perfEntries.length; i++) {
    console.log('Is reloading? ', perfEntries[i].type === 1);
  }
});

I would like to be able to distinguish between a normal reload, e.g., location.reload(), and a forced reload, e.g., location.reload(true).

For clarification: I am not trying to differentiate between a refresh and a reload, hence this is not a duplicate of refresh vs reload. I am trying to find out if there is a way to detect when a user triggers a hard reload instead of a normal reload. I am asking because I want to execute some code prior to a hard reload only.

---

Using JavaScript, via the browsers' reload button, or by a shortcut like Shift+Ctrl+R it is possible to perform a hard reload of a browser tab. Is it possible to detect such a hard reload with JavaScript and if so how?

I know one can detect when a normal reload event is triggered with the onbeforeunload event and I can find out the navigation type to differentiate between a refresh and a reload but I am unable to detect a hard reload.

So far I'am using the following JS code to detect a reload:

window.addEventListener('beforeunload', function (e) {
  // Cancel the event
  e.preventDefault();
  // Chrome requires returnValue to be set
  e.returnValue = '';

  // For older browsers
  console.log('Is reloading?', event.currentTarget.performance.navigation.type === 1);

  // For modern browsers
  const perfEntries = performance.getEntriesByType("navigation");

  for (let i = 0; i < perfEntries.length; i++) {
    console.log('Is reloading? ', perfEntries[i].type === 1);
  }
});

I would like to be able to distinguish between a normal reload, e.g., location.reload(), and a forced reload, e.g., location.reload(true).

• javascript
• browser
• reload

Share Improve this question Follow edited Jan 4, 2019 at 16:57 F Lekschas asked Jan 4, 2019 at 13:46 F LekschasF Lekschas 12.9k1212 gold badges6666 silver badges7575 bronze badges 9

• Do you consider closing the browser and reopening it the same as a page refresh? – Reactgular Commented Jan 4, 2019 at 13:49
• 1 What are you trying to achieve? Ultimately you really can't tell what a browser is up to. – Pointy Commented Jan 4, 2019 at 13:52
• If the server sets a hash code as a cookie when the page is fetched, then the JS checks this hash code against local storage. If they do not match, then it was loaded but if they match it was cached. This works even if you use HTTP header caching. – Reactgular Commented Jan 4, 2019 at 13:54
• @cgTag this is the most viable solution for me too – Mosè Raguzzini Commented Jan 4, 2019 at 14:10
• 1 @MosèRaguzzini yeah, this is a server problem masquerading as a client problem. It's been asked many times on this website, but people keep wanting to solve the problem in JavaScript. It's the same as server programmers wanting to know what timezone a visitor is in by looking at their IP address, when it's a client side problem. – Reactgular Commented Jan 4, 2019 at 14:23

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 3

You cannot detect hard refresh in javascript, as there is no access to the headers for the currently loaded page.

The problem with JavaScript is that it has no notion of a 304. It begins executing in the context of a webpage, but it doesn't know how either itself or the page got there.

However, the server can tell from the request headers if this is a hard refresh, so there's the option of cooperating. For example the server can include a custom <meta> tag in the response or add a special class to <body> and your script will then have access to this information.

Another option is to intercept key bination based on Browser/OS and act before a hard refresh is triggered (appending something to the url, setting a cookie or a local/sessionstorage property)

If you're using service workers, one heuristic would be to use navigator.serviceWorker.controller:

navigator.serviceWorker.controller returns null if the request is a force refresh (shift+refresh).

https://www.w3/TR/service-workers/#dom-serviceworkercontainer-controller

本文标签： browserDetect a hard reload with JavaScriptStack Overflow