JavaScript Hard Refresh der aktuellen Seite

Lesezeit: 4 Minuten

JavaScript Hard Refresh der aktuellen Seite
Leekräfte

Wie kann ich den Webbrowser dazu zwingen, die Seite über JavaScript hart zu aktualisieren?
Harte Aktualisierung bedeutet, eine neue Kopie der Seite zu erhalten UND alle externen Ressourcen (Bilder, JavaScript, CSS usw.) zu aktualisieren.

1643870712 443 JavaScript Hard Refresh der aktuellen Seite
Christian C. Salvado

Versuchen zu benutzen:

location.reload(true);

Wenn diese Methode eine erhält true value als Argument, bewirkt dies, dass die Seite immer neu vom Server geladen wird. Wenn es falsch oder nicht angegeben ist, wird der Browser kann Laden Sie die Seite aus ihrem Cache neu.

Mehr Info:

  • Ich bin mir ziemlich sicher, dass dadurch nicht alle externen Ressourcen neu geladen werden. Da müsste man sich alles durchlesen a, link, script und img -Elemente und fügen Sie eine zufällige Abfragezeichenfolge an das Ende jeder externen Referenz an nach das harte Nachladen. Oder machen Sie das auf dem Server.

    – Doug Neiner

    20. Januar 10 um 5:39 Uhr

  • Hat es 2010 funktioniert? Es funktioniert sicher nicht im Jahr 2018 (in Chrome). Chrome lädt alles (außer /Home/Index) aus dem Cache. Es scheint in Firefox WTH zu funktionieren?

    – Maciej Szpakowski

    23. Februar 18 um 15:30 Uhr


  • Es funktioniert nicht für mich. Dadurch werden die Daten nicht gelöscht, die ich mit Strg F5 lösche

    – ozimax06

    8. Oktober 19 um 14:12 Uhr

  • Ich denke, diese Funktionalität wurde in HTML5 entfernt.

    – Mein Gott

    3. April 2020 um 17:24 Uhr

  • es ist veraltet und wird heutzutage von Browsern ignoriert.

    – Kurkow Igor

    17. Februar 21 um 19:05 Uhr

window.location.href = window.location.href

  • Dadurch wird die Seite nicht vom Server abgerufen, wenn der Browser sie zwischengespeichert hat.

    – LukasP

    7. April 20 um 20:42 Uhr

  • Bitte fügen Sie Ihrer Antwort eine Erklärung hinzu, damit andere daraus lernen können

    – Nico Haase

    20. Januar 21 um 16:58 Uhr

  • Funktioniert für meinen Fall! Ich denke, es hat POST-Daten in einem WordPress-Plugin gelöscht, an dem ich arbeite.

    – Marina Dunst

    9. Juli 21 um 15:55 Uhr

Für eckige Benutzer und wie hier zu finden, können Sie Folgendes tun:

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

Der Grund, warum es funktionierte, wurde auf dieser Website erklärt: https://www.xspdf.com/resolution/52192666.html

In diesem Artikel erfahren Sie auch, wie das Hard Reload für jedes Framework funktioniert und mehr

Erklärung: Eckig

Location: reload(), Die Methode Location.reload() lädt die aktuelle URL neu, wie die Schaltfläche Refresh. Nur location.reload(); ist keine Lösung, wenn Sie ein Force-Reload durchführen möchten (wie zB mit Strg + F5), um alle Ressourcen vom Server und nicht aus dem Browser-Cache neu zu laden. Die Lösung für dieses Problem besteht darin, eine POST-Anforderung an den aktuellen Standort auszuführen, da dies den Browser immer dazu bringt, alles neu zu laden.

Die oben akzeptierte Antwort macht nichts mehr außer einem normalen Neuladen auf den meisten neuen Versionen von Webbrowsern heute. Ich habe alle diese auf meinem kürzlich aktualisierten Chrome ausprobiert, einschließlich location.reload(true), location.href = location.hrefund <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />. Keiner von ihnen funktionierte.

Meine Lösung besteht darin, die serverseitige Fähigkeit zu verwenden, um eine sich nicht wiederholende Abfragezeichenfolge an alle enthaltenen Quelldateireferenzen anzuhängen, wie im folgenden Beispiel.

<script src="script.js?t=<?=time();?>"></script>

Sie müssen also auch dynamisch steuern, wann die vorherige Datei beibehalten und wann sie aktualisiert werden soll. Das einzige Problem ist, wenn die Aufnahme von Dateien über Skripts von Plugins durchgeführt wird, haben Sie keine Kontrolle darüber, sie zu ändern. Machen Sie sich keine Sorgen über das Überfluten von Quelldateien. Wenn die Verknüpfung älterer Dateien aufgehoben wird, wird automatisch eine Garbage Collection durchgeführt.

1643870713 423 JavaScript Hard Refresh der aktuellen Seite
ShortFuse

Das Ändern der aktuellen URL mit einem Suchparameter führt dazu, dass Browser denselben Parameter an den Server weitergeben, was mit anderen Worten eine Aktualisierung erzwingt.

(Keine Garantien, wenn Sie Intercept mit einem Service Worker verwenden.)

  const url = new URL(window.location.href);
  url.searchParams.set('reloadTime', Date.now().toString());
  window.location.href = url.toString();

Wenn Sie ältere Browser unterstützen möchten:

if ('URL' in window) {
  const url = new URL(window.location.href);
  url.searchParams.set('reloadTime', Date.now().toString());
  window.location.href = url.toString();
} else {
  window.location.href = window.location.origin 
    + window.location.pathname 
    + window.location.search 
    + (window.location.search ? '&' : '?')
    + 'reloadTime="
    + Date.now().toString()
    + window.location.hash;
}

Allerdings ist es etwas mühsamer, alle Ihre CSS- und JS-Dateien zu aktualisieren. Sie möchten den gleichen Vorgang zum Hinzufügen eines Suchparams für alle durchführen src Attribute ein <script> und href in <link>. Das heißt, es wird das aktuelle JS nicht entladen, würde aber für CSS gut funktionieren.

document.querySelectorAll('link').forEach((link) => link.href = addTimestamp(link.href));

Ich werde mich nicht mit einem JS-Beispiel beschäftigen, da es wahrscheinlich nur Probleme verursachen wird.

Sie können sich diesen Ärger ersparen, indem Sie beim Kompilieren des HTML-Codes einen Zeitstempel als Suchparameter in Ihre JS- und CSS-Links einfügen.

.

751840cookie-checkJavaScript Hard Refresh der aktuellen Seite

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy