De pagina herladen met JavaScript: location.reload()
Een pagina herladen met JavaScript
JavaScript location.reload(): een pagina goed verversen | We.Inc
Herlaad de pagina met location.reload(), vergelijk het met history.go(0), replace en meta refresh, genereer code voor verversen op een timer, en lees wat reload(true) echt doet.
Roep location.reload() aan om de huidige pagina te herladen, precies zoals de herlaadknop van de browser. Het neemt geen standaardargumenten. De oude vorm reload(true), bedoeld om de cache over te slaan, is een niet-standaard parameter die volgens MDN alleen in Firefox wordt ondersteund, dus andere browsers negeren de true. history.go(0) herlaadt ook.
Manieren om de pagina te verversen of te verplaatsen
Code
Wat er gebeurt
Voegt een geschiedenisitem toe?
location.reload()
Herlaadt de huidige URL
Nee
history.go(0) or history.go()
Hetzelfde resultaat als location.reload()
Nee
location.replace(url)
Laadt url en vervangt het huidige item
Nee, Terug slaat de oude pagina over
location.assign(url)
Laadt url als nieuwe stap
Ja
<meta http-equiv="refresh" content="30">
Herlaadt na 30 seconden, geen script nodig
Nee
Herladen is één regel code, maar de redenen waarom mensen het gebruiken verschillen: nieuwe data ophalen, een vastgelopen toestand resetten, een dashboard op een timer verversen of een nieuwe versie van de site afdwingen. Deze gids toont de standaardaanroep, wat de oudere varianten echt doen, en hoe u herladen helemaal vermijdt als u alleen verse data nodig hebt.
Kies een methode en een interval in de generator.
Het codevak wordt bijgewerkt met een fragment voor die methode, klaar om te plakken.
Gebruik de knoppen om location.reload() en history.go(0) op deze pagina te proberen. Beide herladen de pagina.
Lees de sectie over de cache voordat u op herladen vertrouwt om nieuw uitgerolde bestanden te tonen.
location.reload() geeft niets terug en code erna kan nog even draaien voordat de pagina wordt verlaten, dus zet het als laatste.
Waarschuw voordat u een pagina met een formulier herlaadt voor niet-opgeslagen invoer met een beforeunload-listener; de browser toont dan een eigen algemene melding, niet de uwe.
Een getimede refresh in een verborgen tabblad verspilt data en batterij. Controleer document.visibilityState en sla het herladen over zolang het tabblad op de achtergrond staat.
In een single page app is data opnieuw ophalen of de state resetten meestal sneller, en blijven scrollpositie, invoer en focus behouden.
Veelgestelde vragen
Leegt location.reload(true) de cache?
Niet betrouwbaar. Het argument forceGet hoort niet bij de HTML-standaard, en MDN vermeldt dat alleen Firefox het ondersteunt. Andere browsers negeren het en herladen normaal. Om zeker te weten dat mensen nieuwe bestanden krijgen, geeft u uw asset-URL's een versie of stelt u goede Cache-Control-headers in.
Wat is het verschil tussen location.reload() en location.href = location.href?
reload() herlaadt altijd het huidige document. Een toewijzing aan href start een navigatie naar die URL, en als de URL een #fragment bevat, scrolt de browser alleen naar het fragment, dus er wordt niets herladen. Gebruik reload() als herladen is wat u wilt.
Hoe ververs ik een pagina elke 30 seconden?
Zonder script voegt u <meta http-equiv="refresh" content="30"> toe aan de head. Met script: setTimeout(() => location.reload(), 30000). Gebruik automatisch verversen spaarzaam: MDN waarschuwt dat onverwachte verversingen mensen kunnen desoriënteren en kunnen botsen met de WCAG-richtlijnen over timing.
Kan een script een pagina van een andere site herladen?
Nee. reload aanroepen op de Location van een andere origin geeft een SecurityError DOMException, dus een script in een iframe van een andere site kan de bovenliggende pagina niet herladen, en de bovenliggende pagina kan het iframe niet op die manier herladen.
Hoe herlaad ik de pagina maar één keer?
Leg vast dat u al hebt herladen, bijvoorbeeld met een vlag in sessionStorage of een queryparameter zoals ?r=1, en controleer dat voordat u reload aanroept. Zonder zo'n controle maakt code die bij het laden herlaadt een eindeloze lus.
Herladen tegenover verse data ophalen
Een volledige herlaad gooit de hele pagina weg: de DOM, elke variabele, open menu's, getypte invoer en meestal ook de scrollpositie. Dat is de juiste reset als de pagina in een slechte toestand is of een nieuwe versie moet laden.
Als u alleen nieuwe cijfers op een dashboard nodig hebt, roep dan fetch aan, werk het deel van de pagina bij dat is veranderd en laat de rest staan. Dat is sneller, gebruikt minder data en laat het scherm niet flitsen.
Waarom een herlaad toch oude bestanden kan tonen
Bij een normale herlaad laat de browser gecachete bestanden opnieuw valideren door de server, maar bestanden met een lange cacheduur kunnen nog steeds rechtstreeks uit de cache komen. Code die vanuit JavaScript een harde refresh probeert af te dwingen, lost dat niet in alle browsers op.
De betrouwbare oplossing zit op de server en in de build: zet een content hash in de bestandsnamen van scripts en stijlen, zodat elke uitrol nieuwe URL's krijgt, en lever de HTML met een korte cacheduur of no-cache, zodat die altijd naar de nieuwste bestanden wijst.
Herlaadcode om te plakken
Een herlaadknop
De klikhandler roept de standaard reload zonder argument aan.
Verversen op een timer, maar alleen als het tabblad zichtbaar is
Verborgen tabbladen worden overgeslagen, en een tabblad dat na het interval terugkomt, herlaadt meteen.
Precies één keer herladen
De vlag in sessionStorage overleeft de herlaad in hetzelfde tabblad, dus de tweede keer laden slaat hem over.
Waarschuwen voor herladen bij niet-opgeslagen wijzigingen
Browsers tonen de melding pas nadat de persoon iets met de pagina heeft gedaan, en ze gebruiken hun eigen tekst.
Generator voor refresh-code
Kies hoe en hoe vaak de pagina moet verversen en kopieer daarna het fragment.
Methode
Nu herladen
JavaScript-timer
Timer, alleen zichtbaar tabblad
HTML meta refresh
Elke {n} seconden
Fragment
Probeer het op deze pagina
location.reload()
history.go(0)
Beide knoppen herladen deze pagina. Alles wat u hierboven hebt getypt, gaat verloren.