JavaScript hard refresh of current page

Question

How can I force the web browser to do a hard refresh of the page via JavaScript?
Hard refresh means getting a fresh copy of the page AND refresh all the external resources (images, JavaScript, CSS, etc.).

Answer 1

Try to use:

location.reload(true);

When this method receives a true value as argument, it will cause the page to always be reloaded from the server. If it is false or not specified, the browser may reload the page from its cache.

More info:

• The location object

Answer 2

window.location.href = window.location.href

Answer 3

I was working on django , but nothing was working so this bypass worked for me , it's forwarding to the next so whenever you just want to come back it's Hard refreshing the page ! it's maybe not the proper way but can solve the issue , try it out and let me know !

window.history.forward(1);

Answer 4

For angular users and as found here, you can do the following:

<form [action]="myAppURL" method="POST" #refreshForm></form>

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  // ...
})
export class FooComponent {
  @ViewChild('refreshForm', { static: false }) refreshForm;

  forceReload() {
    this.refreshForm.nativeElement.submit();
  }
}

The reason why it worked was explained on this website: https://www.xspdf.com/resolution/52192666.html

You'll also find how the hard reload works for every framework and more in this article

explanation: Angular

Location: reload(), The Location.reload() method reloads the current URL, like the Refresh button. Using only location.reload(); is not a solution if you want to perform a force-reload (as done with e.g. Ctrl + F5) in order to reload all resources from the server and not from the browser cache. The solution to this issue is, to execute a POST request to the current location as this always makes the browser to reload everything.