Różnica między window.location.href = window.location.href i window.location.reload ()

196

Jaka jest różnica między JavaScript

window.location.href = window.location.href

i 

window.location.reload()

Funkcje?

javascript Brian
źródło

Odpowiedzi:

247

Jeśli dobrze pamiętam, ponownie window.location.reload()ładuję bieżącą stronę danymi POST, window.location.href=window.location.hrefale nie zawiera danych POST.

Jak zauważył @ W3Max w komentarzach poniżej, window.location.href=window.location.hrefnie przeładuje strony, jeśli w adresie URL jest kotwica (#) - Musisz użyćwindow.location.reload() takim przypadku .

Ponadto, jak zauważył @Mic poniżej, window.location.reload()bierze dodatkowy argument, skipCachedzięki czemu przy użyciu window.location.reload(true)przeglądarki pominie pamięć podręczną i ponownie załaduje stronę z serwera. window.location.reload(false)zrobi odwrotnie i załaduje stronę z pamięci podręcznej, jeśli to możliwe.

David Johnstone
źródło
11
zwróć uwagę, że podczas korzystania z window.location.reload () w POST przeglądarka zapyta, czy chcesz ponownie wysłać dane, aby ponownie załadować stronę
wimh
3
@Wimmel, czy istnieje sposób na wyłączenie tej wiadomości?
Kris-I
40
window.location.href = window.location.href nie przeładuje strony, jeśli w adresie URL jest kotwica (#) - W tym przypadku musisz użyć window.location.reload ().
W3Max
5
Zauważ również, że location.reload () wymusi także ponowne załadowanie całej zawartości statycznej (podobnie jak twarde odświeżanie w stylu ctrl + f5), podczas gdy ustawienie location.href z powrotem do href (lub nazwa ścieżki lub URL) nie, co może być znaczące (i niepotrzebna) różnica w czasie ładowania na niektórych stronach.
Rob Van Dam
2
@Wimmel Chrome: ponownie ładuje stronę za pomocą GET Firefox: ponownie wykonuje poprzednie żądanie, co oznacza, że ​​jeśli był to test POST, otrzymasz miłe okienko z pytaniem, czy wysłać dane ponownie, czy nie
Juri
51

Jeśli mówisz, window.location.reload(true)że przeglądarka pominie pamięć podręczną i ponownie załaduje stronę z serwera. window.location.reload(false)zrobi odwrotnie.

Uwaga: defaultwartość dla window.location.reload()isfalse

Mikrofon
źródło
5
@Ismail - wartość domyślna to false.
Trevor
2
Google Chrome 32, podczas korzystania z webRTC prawda / fałsz nie działała dla mnie. Miałem iframe z webRTC i tylko za pomocą tego window.location.href = window.location.hrefzrobiłem.
Jeśli dokonałeś zmian w formularzu na stronie, zmiany mogą zniknąć (powrócić do wartości z pamięci podręcznej) w zależności od przeglądarki podczas używania location.reload()lub location.reload(false). Aby wykonać pełne odświeżenie strony, użyj location.reload(true).
Suncat2000
32

Różnica jest taka 

window.location = document.URL;

nie przeładuje strony, jeśli w adresie URL znajduje się skrót (#) (z lub bez czegoś po nim), natomiast 

window.location.reload();

przeładuje stronę.

Fabien Ménager
źródło
2
Nie wszystkie przeglądarki mają ten problem z zakończeniami. Jeśli martwisz się o haszowanie końcowe, spróbuj: window.location = document.URL.replace (/ # $ /, '');
Walter Stabosz
1
Dotyczy to przynajmniej Chrome. Kiedyś uważałem to location.href = location.hrefza coś oczywistego, ale właśnie zauważyłem to dokładne zachowanie i przyszedłem do SO, aby rozpowszechnić informacje. location.reload()Zamiast tego użyj .
Pioul,
1
Możesz także użyć window.location.pathname zamiast pisać takie wyrażenie regularne. Na przykład:window.location.replace(window.location.pathname);
Arseny,
20

Jeśli dodasz wartość logiczną true do przeładowania window.location.reload(true), zostanie ona załadowana z serwera.

Nie jest jasne, w jaki obsługiwany jest to logiczna, W3Org wspomina, że NS wykorzystywane do wspierania go

Może istnieć różnica między zawartością window.location.href i document.URL - przynajmniej kiedyś istniała różnica między location.href a niestandardową i nieaktualną lokalizacją document.lore, która miała związek z przekierowaniem, ale to to naprawdę ostatnie tysiąclecie.

Do celów dokumentacji użyłbym funkcji window.location.reload (), ponieważ właśnie to chcesz zrobić.

mplungjan
źródło
Spójrz na stackoverflow.com/a/5091619/429972, ponieważ wyjaśnia to różnicę.
jontro
14

Jak powiedziano, modyfikacja href, gdy w adresie URL znajduje się skrót (#), nie spowoduje ponownego załadowania strony. Dlatego używam tego do przeładowania zamiast wyrażeń regularnych:

if (!window.location.hash) {
    window.location.href = window.location.href;
} else {
    window.location.reload();
}
drobne
źródło
6

Spotykając się z tym pytaniem, badając niektóre nieprawidłowe zachowania w IE, szczególnie IE9, nie sprawdziłem starszych wersji. Wydaje się

window.location.reload();

powoduje odświeżenie, które na sekundę usuwa cały ekran, gdzie as

 window.location = document.URL;

odświeża stronę znacznie szybciej, prawie niezauważalnie.

Przeprowadzając nieco więcej badań i eksperymentując ze skrzypkiem, wydaje się, że window.location.reload()obejdzie pamięć podręczną i przeładuje z serwera, niezależnie od tego, czy przekażesz z nią wartość logiczną, czy nie, obejmuje to uzyskanie wszystkich zasobów (obrazów, skryptów, arkuszy stylów, itp.) ponownie. Więc jeśli chcesz tylko, aby strona odświeżyła HTML,window.location = document.URL powróci ona znacznie szybciej i przy mniejszym ruchu.

Różnica w zachowaniu między przeglądarkami polega na tym, że gdy IE9 używa metody przeładowania, usuwa widoczną stronę i pozornie odbudowuje ją od zera, gdzie FF i chrome czekają, aż otrzymają nowe zasoby i odbudują je, jeśli są różne.

invertedSpear
źródło
window.location = document.URL ponownie ładuje stronę tak jak window.location.reload (). Czy istnieje najnowocześniejszy sposób na odświeżanie bez przewijania z powrotem na górę lub niezauważalnie, jak powiedziałeś?
bigmugcup
6

Różnica w Firefoksie (12.0) polega na tym, że na stronie renderowanej z POST reload () wyświetli ostrzeżenie i prześle ponownie, podczas gdy przypisanie adresu URL wykona GET.

Google Chrome robi GET dla obu.

mrj
źródło
1
Wygląda na to, że Chrome 38 używa POST do .reload ().
Glen Little,
3

Korzystając z JSF, mam teraz problem z odświeżaniem po zakończeniu sesji: PrimeFaces ViewExpiredException po przeładowaniu strony i po pewnym dochodzeniu znalazłem jedną różnicę w FireFox:

Wywołanie window.location.reload()działa jak kliknięcie ikony odświeżania na FF, dodaje linię

Cache-Control max-age=0

chociaż ustawienie window.location.hrefdziała jak naciśnięcie ENTER w wierszu adresu URL, nie wysyła tego wiersza.

Chociaż oba są wysyłane jako GET, pierwszy (przeładowanie) przywraca poprzednie dane, a aplikacja jest niespójna.

Żeglarz naddunajski
źródło
1

Nie, nie powinno być. Możliwe jest jednak, że istnieją różnice w niektórych przeglądarkach, więc albo (albo żadna) może nie działać w niektórych przypadkach.

Olli
źródło
1

z mojego około 3-letniego doświadczenia nie mogłem znaleźć żadnej różnicy ...

edit: tak, jak powiedział jeden z nich, tylko przekazanie parametru boolean do window.location.reload () jest różnicą. jeśli przekażesz true , przeglądarka ładuje świeżą stronę, ale jeśli false , ładowana jest wersja pamięci podręcznej ...

kumarharsh
źródło
0

W naszym przypadku chcemy po prostu ponownie załadować stronę w widoku internetowym iz kilku powodów nie mogliśmy dowiedzieć się, dlaczego! Wypróbowujemy prawie każde rozwiązanie, które było w sieci, ale utknęliśmy bez przeładowywania za pomocą location.reload () lub alternatywnych rozwiązań, takich jak window.location.reload (), location.reload (true), ...!

Oto nasze proste rozwiązanie:

Wystarczy użyć tagu <a> z pustą wartością atrybutu „href” w następujący sposób:

< a href="" ...>Click Me</a>

(w niektórych przypadkach musisz użyć „return true” po kliknięciu celu, aby uruchomić przeładowanie)

Aby uzyskać więcej informacji, sprawdź to pytanie: Czy pusty href jest prawidłowy?

Metro Polisue
źródło
-3

window.location.href, to uratowało mi życie w widoku internetowym z Androida 5.1. Strona nie ładuje się ponownie z location.reload () w tej wersji z Androida.

Rony Silva
źródło