Odświeżanie strony w JavaScript: location.reload()

Odświeżanie strony w JavaScript

JavaScript location.reload(): jak poprawnie odświeżyć stronę | We.Inc

Odśwież stronę przez location.reload(), porównaj to z history.go(0), replace i meta refresh, wygeneruj kod odświeżania w odstępach czasu i dowiedz się, co naprawdę robi reload(true).

Wywołaj location.reload(), aby przeładować bieżącą stronę dokładnie tak, jak robi to przycisk odświeżania w przeglądarce. Nie przyjmuje standardowych argumentów. Stara forma reload(true), mająca pomijać cache, to niestandardowy parametr, który według MDN działa tylko w Firefox, więc inne przeglądarki ignorują true. history.go(0) również przeładowuje stronę.

Sposoby odświeżenia lub zmiany strony

Kod
Co się dzieje
Dodaje wpis do historii?

location.reload()
Przeładowuje bieżący URL
Nie

history.go(0) lub history.go()
Ten sam efekt co location.reload()
Nie

location.replace(url)
Ładuje url i zastępuje bieżący wpis
Nie, Wstecz pomija starą stronę

location.assign(url)
Ładuje url jako nowy krok
Tak

<meta http-equiv="refresh" content="30">
Przeładowuje po 30 sekundach, bez skryptu
Nie

Przeładowanie to jedna linia kodu, ale powody, dla których ludzie po nie sięgają, są różne: pobranie nowych danych, zresetowanie zablokowanego stanu, odświeżanie dashboardu co jakiś czas albo wymuszenie nowej wersji strony. Ten poradnik pokazuje standardowe wywołanie, co naprawdę robią starsze warianty i jak całkowicie uniknąć przeładowania, gdy wystarczy pobrać świeże dane.

Wybierz w generatorze metodę odświeżania i interwał.
Pole kodu aktualizuje się gotowym do wklejenia fragmentem dla tej metody.
Użyj przycisków, aby wypróbować location.reload() i history.go(0) na tej stronie. Oba ją przeładowują.
Przeczytaj sekcję o cache, zanim zaczniesz polegać na przeładowaniu przy pokazywaniu nowo wdrożonych plików.

location.reload() nic nie zwraca, a kod po nim może jeszcze krótko działać, zanim strona się wyładuje, więc umieść je na końcu.
Przed przeładowaniem strony z formularzem ostrzeż o niezapisanych danych przez listener beforeunload: przeglądarka pokaże własny ogólny komunikat, a nie Twój.
Odświeżanie co jakiś czas w ukrytej karcie marnuje transfer i baterię. Sprawdzaj document.visibilityState i pomijaj przeładowanie, gdy karta jest w tle.
W aplikacji jednostronicowej ponowne pobranie danych lub zresetowanie stanu jest zwykle szybsze i zachowuje pozycję przewinięcia, wpisane dane i fokus.

Najczęściej zadawane pytania

Czy location.reload(true) czyści cache?

Nie w niezawodny sposób. Argument forceGet nie jest częścią standardu HTML, a MDN zaznacza, że obsługuje go tylko Firefox. Inne przeglądarki go ignorują i wykonują zwykłe przeładowanie. Aby mieć pewność, że ludzie dostaną nowe pliki, wersjonuj adresy URL zasobów lub ustaw właściwe nagłówki Cache-Control.

Czym różni się location.reload() od location.href = location.href?

reload() zawsze przeładowuje bieżący dokument. Przypisanie href rozpoczyna nawigację do tego adresu URL, a gdy URL zawiera #fragment, przeglądarka tylko przewija do fragmentu, więc nic się nie przeładowuje. Używaj reload(), gdy chcesz przeładowania.

Jak odświeżać stronę co 30 sekund?

Bez skryptu dodaj <meta http-equiv="refresh" content="30"> do sekcji head. Ze skryptem użyj setTimeout(() => location.reload(), 30000). Z automatycznego odświeżania korzystaj oszczędnie: MDN ostrzega, że nieoczekiwane odświeżenia mogą dezorientować ludzi i kolidować z wytycznymi WCAG dotyczącymi limitów czasu.

Czy skrypt może przeładować stronę z innej witryny?

Nie. Wywołanie reload na Location innego originu rzuca SecurityError DOMException, więc skrypt w iframe z innej witryny nie może w ten sposób przeładować strony nadrzędnej, a strona nadrzędna nie może przeładować jego.

Jak przeładować stronę tylko raz?

Zaznacz, że przeładowanie już nastąpiło, na przykład flagą w sessionStorage lub parametrem zapytania, takim jak ?r=1, i sprawdzaj to przed wywołaniem reload. Bez takiego zabezpieczenia kod, który przeładowuje przy ładowaniu, tworzy nieskończoną pętlę.

Przeładowanie a pobranie świeżych danych

Pełne przeładowanie wyrzuca całą stronę: DOM, każdą zmienną, otwarte menu, wpisane dane i zwykle pozycję przewinięcia. To właściwy reset, gdy strona jest w złym stanie lub musi się załadować nowa wersja.
Gdy potrzebujesz tylko nowych liczb na dashboardzie, wywołaj fetch, zaktualizuj część strony, która się zmieniła, a resztę zostaw. To szybsze, zużywa mniej transferu i nie powoduje mignięcia ekranu.

Dlaczego przeładowanie może nadal pokazywać stare pliki

Zwykłe przeładowanie pozwala przeglądarce zweryfikować pliki z cache na serwerze, ale pliki serwowane z długim czasem życia w cache mogą nadal pochodzić prosto z cache. Kod, który próbuje wymusić twarde odświeżenie z JavaScript, nie naprawi tego we wszystkich przeglądarkach.
Niezawodne rozwiązanie leży po stronie serwera i builda: umieść hash zawartości w nazwach plików skryptów i stylów, aby każde wdrożenie dostawało nowe adresy URL, i serwuj HTML z krótkim czasem życia w cache lub bez cache, aby zawsze wskazywał najnowsze pliki.

Kod przeładowania do wklejenia

Przycisk przeładowania

Handler kliknięcia wywołuje standardowe przeładowanie bez argumentu.

Odświeżanie co jakiś czas, ale tylko gdy karta jest widoczna

Ukryte karty są pomijane, a karta, która wraca po upływie interwału, przeładowuje się od razu.

Przeładowanie dokładnie raz

Flaga w sessionStorage przetrwa przeładowanie w tej samej karcie, więc drugie ładowanie je pomija.

Ostrzeżenie przed przeładowaniem przy niezapisanych zmianach

Przeglądarki pokazują okno dopiero po tym, jak osoba wejdzie w interakcję ze stroną, i używają własnego tekstu.

Generator kodu odświeżania

Wybierz, jak i jak często strona ma się odświeżać, a potem skopiuj fragment kodu.

Metoda

Przeładuj teraz

Timer JavaScript

Timer, tylko widoczna karta

HTML meta refresh

Co {n} sekund

Fragment kodu

Wypróbuj na tej stronie

location.reload()

history.go(0)

Oba przyciski przeładowują tę stronę. Wszystko, co wpisano powyżej, zostanie utracone.

Odświeżanie strony w JavaScript: location.reload()