Jak ponownie załadować stronę za pomocą JavaScript

873

Jak mogę ponownie załadować stronę za pomocą JavaScript?

Potrzebuję metody, która działa we wszystkich przeglądarkach.

Resh
źródło

Odpowiedzi:

946

JavaScript 1.0

window.location.href = window.location.pathname + window.location.search + window.location.hash;
// creates a history entry

JavaScript 1.1

window.location.replace(window.location.pathname + window.location.search + window.location.hash);
// does not create a history entry

JavaScript 1.2

window.location.reload(false); 
// If we needed to pull the document from
//  the web-server again (such as where the document contents
//  change dynamically) we would pass the argument as 'true'.
Gianebao
źródło
81
„true” wymusi ponowne załadowanie strony z serwera. „false” przeładuje z pamięci podręcznej, jeśli jest dostępna.
barro32
3
Czy .reload(true)zostanie dodany do historii? Jeśli tak, jak tego uniknąć poprzez przeładowanie?
johntrepreneur
12
Oto link do dokumentacji: developer.mozilla.org/en-US/docs/Web/API/window.location
Justin Ethier
1
To jest najlepsza odpowiedź i powinna być na górze. Mój problem z innymi funkcjami polega na tym, że nie odświeżały strony treściami z serwera i nie używały pamięci podręcznej, więc JavaScript 1.2 było dla mnie najlepszym i jedynym rozwiązaniem.
Ryan Coolwebs,
8
.reload (true) lub .reload (false) jest przestarzałe zgodnie z moim IDE i github.com/Microsoft/TypeScript/issues/28898 - powinien teraz używać .reload ()
danday74
388
location.reload();

Zobacz tę stronę MDN, aby uzyskać więcej informacji.

Jeśli odświeżasz po onclick, musisz natychmiast zwrócić wartość false

location.reload();
return false;
Lekensteyn
źródło
22
Jaka jest różnica między location.reload()i window.location.reload()?
Raptor,
53
@ShivanRaptor Zazwyczaj żaden, w kontekście przeglądarek internetowych, locationjest taka sama jak window.locationza windowto globalny obiekt.
Lekensteyn,
1
nie zapomnij, return false;jeśli dzwonisz do tego z kliknięcia linku.
Rimian
2
Wolę używać ze względu window.location.reload();na czytelność, ponieważ locationmoże to być zmienna lokalna - podczas gdy zwykle unikamy zmiennych o nazwie window.
Yeti
217

Oto 535 sposobów na przeładowanie strony za pomocą JavaScript , z których najłatwiej jest location = location.

Oto pierwsze 50:

location = location
location = location.href
location = window.location
location = self.location
location = window.location.href
location = self.location.href
location = location['href']
location = window['location']
location = window['location'].href
location = window['location']['href']
location = window.location['href']
location = self['location']
location = self['location'].href
location = self['location']['href']
location = self.location['href']
location.assign(location)
location.replace(location)
window.location.assign(location)
window.location.replace(location)
self.location.assign(location)
self.location.replace(location)
location['assign'](location)
location['replace'](location)
window.location['assign'](location)
window.location['replace'](location)
window['location'].assign(location)
window['location'].replace(location)
window['location']['assign'](location)
window['location']['replace'](location)
self.location['assign'](location)
self.location['replace'](location)
self['location'].assign(location)
self['location'].replace(location)
self['location']['assign'](location)
self['location']['replace'](location)
location.href = location
location.href = location.href
location.href = window.location
location.href = self.location
location.href = window.location.href
location.href = self.location.href
location.href = location['href']
location.href = window['location']
location.href = window['location'].href
location.href = window['location']['href']
location.href = window.location['href']
location.href = self['location']
location.href = self['location'].href
location.href = self['location']['href']
location.href = self.location['href']
...
Jeremy Thille
źródło
84
to ciekawe, ale teraz jestem zdezorientowany
Arun Prasad ES
14
Podkreśla także osobliwość Javascript :)
Jeremy Thille,
51
Osobiście nie podoba mi się ta odpowiedź, ponieważ pokazuje ona tylko kilka różnych implementacji zmieniających lokalizację. Te sposoby to kombinacje różnych sposobów wykonywania funkcji lub uzyskiwania dostępu do atrybutu w javascript. NIE różne sposoby ponownego ładowania strony.
Joshua Behrens
40
Na pewno jest jeszcze więcej, takich jak:window.window.window['window'].location = window['window'].window['window']['window']['window']['window']['window']['window']['location']
Renato,
84

Możesz wykonać to zadanie za pomocą window.location.reload();. Ponieważ istnieje wiele sposobów, aby to zrobić, ale uważam, że jest to odpowiedni sposób na ponowne załadowanie tego samego dokumentu za pomocą JavaScript. Oto wyjaśnienie

window.locationMożna użyć obiektu JavaScript

  • aby uzyskać aktualny adres strony (URL)
  • przekierować przeglądarkę na inną stronę
  • aby ponownie załadować tę samą stronę

window: w JavaScript reprezentuje otwarte okno w przeglądarce.

location: w JavaScript zawiera informacje o bieżącym adresie URL.

locationObiekt jest jak fragment windowobiektu i nazywa się po window.locationobiekcie.

location obiekt ma trzy metody:

  1. assign(): używane do załadowania nowego dokumentu
  2. reload(): służy do ponownego załadowania bieżącego dokumentu
  3. replace(): używane do zastąpienia bieżącego dokumentu nowym

Więc tutaj musimy użyć reload(), ponieważ może nam pomóc w przeładowaniu tego samego dokumentu.

Więc użyj tego jak window.location.reload();.

Demo online na jsfiddle

Aby poprosić przeglądarkę o pobranie strony bezpośrednio z serwera, a nie z pamięci podręcznej, możesz przekazać trueparametr do location.reload(). Ta metoda jest kompatybilna ze wszystkimi głównymi przeglądarkami, w tym IE, Chrome, Firefox, Safari, Opera.

Nikhil Agrawal
źródło
2
Ach ha! replace()okazało się rozwiązaniem, którego szukałem, ponieważ musiałem ponownie załadować stronę z niewielką zmianą ciągu zapytania.
Bernard Hymmen
W w3schools: „Różnica między przypisaniem () i replace () polega na tym, że replace () usuwa adres URL bieżącego dokumentu z historii dokumentu, co oznacza, że ​​nie można użyć przycisku„ wstecz ”, aby przejść z powrotem do orginalny dokument."
pasaba por aqui
54

Próbować:

window.location.reload(true);

Parametr ustawiony na „prawda” ponownie ładuje świeżą kopię z serwera. Pozostawienie go spowoduje wyświetlenie strony z pamięci podręcznej.

Więcej informacji można znaleźć na stronie witrynie MSDN oraz w dokumentacji Mozilli .

Orane
źródło
1
co jeśli chcę odświeżyć zewnętrzną stronę internetową www.xyz.com/abc?
DoIt
@Dev: Powinieneś spróbować „zastąpić”, jak wspomniano później
Jean Paul AKA el_vete
@Orane: Podoba mi się zarówno prostota, jak i zaradność tej odpowiedzi, w szczególności dlatego, że daje wiele opcji, aby zaspokoić zapytanie operatora, które powiedziało: dziękuję za podanie odnośnika do organu również w tej sytuacji, do wykorzystania w przyszłości w każdej przeglądarce mają własny silnik JS do renderowania ... Myślę, że pytanie jest bardzo ogólne i powinno zależeć od tego, do czego chcesz to zrobić, ponieważ w innym przypadku odwołanie do sieci: „ phpied.com/files/location-location/location- location.html ”może całkowicie zaspokoić możliwości tego pytania. Jednak ten pomógł mi;)
Jean Paul AKA el_vete 30.03.17
1
Czy to nadal prawda? Oba te linki nie wspominają o żadnym parametrze do przeładowania.
Rüdiger Schulz
50

Szukałem niektórych informacji dotyczących przeładowań na stronach pobranych za pomocą żądań POST, na przykład po przesłaniu method="post" formularza.

Aby ponownie załadować stronę z danymi POST, użyj:

window.location.reload();

Aby ponownie załadować stronę odrzucającą dane POST (wykonaj żądanie GET), użyj:

window.location.href = window.location.href;

Mam nadzieję, że może to pomóc innym szukającym tych samych informacji.

Starwarswii
źródło
Dziękujemy za odpowiedź, w tym odniesienie do ponownego załadowania dokumentu pobranego z POSTżądaniem.
Christopher Schultz
Dobre rozróżnienie pomiędzy GETi POSTmetodami
Hassan Baig
Ta odpowiedź była zbyt niska!
Greg Randall
1
window.location.href = window.location.hrefnie ładuje strony ponownie, jeśli bieżący adres URL zawiera #. Możesz usunąć skrót, jeśli go nie potrzebujesz window.location.href = window.location.href.split('#')[0];.
Roland Starke
40

Aby ponownie załadować stronę za pomocą JavaScript, użyj:

window.location.reload();
Girish Ninama
źródło
37

To działa dla mnie:

function refresh() {    
    setTimeout(function () {
        location.reload()
    }, 100);
}

http://jsfiddle.net/umerqureshi/znruyzop/

umer
źródło
Jest to dla mnie lepsze, ponieważ pozwala uniknąć pętli po stronie serwera
ILMostro_7,
1
Szczególnie doceniam włączenie funkcji limitu czasu, ponieważ mam komunikat, który nadal chcę obejrzeć przed odświeżeniem. Sława!
Matt Cremeens,
możesz ustawić różne wartości jako drugi argument funkcji setTimeout, ale to nie zadziała, przeładowanie nastąpi natychmiast, jak to rozwiązać?
O.Kuz
1
@ O.Kuz nie sądzę. Powiedzmy, że jeśli ustawisz wartość na 5000 ms, przeładowanie nastąpi po 5 sekundach. patrz jsfiddle.net/umerqureshi/znruyzop/446
um
1
Muszę znaleźć błąd w moim kodzie) Wielkie dzięki!
O.Kuz
15

Jeśli umieścisz

window.location.reload(true);

na początku strony, bez żadnych innych warunków określających, dlaczego ten kod działa, strona zostanie załadowana, a następnie będzie się ładować ponownie, dopóki nie zamkniesz przeglądarki.

Joe Devlin
źródło
Cóż, lub dopóki nie otworzysz innego adresu URL. Prawdopodobnie zależy to od zdolności przeglądarki do obsługi ciągłego (ponownego) ładowania strony.
adamdunson
cóż, to zależy od tego, gdzie go umieścisz, jak prawidłowo podałeś. Odwołujemy się tutaj jedynie do tego, że być może tag kotwicy nie jest intuicyjnym elementem do wykonania takiej akcji, jak ponowne załadowanie strony. Sugestia: Do wykonania zdarzenia onclick polegamy na innym obiekcie interfejsu użytkownika jako celu. Możesz to zrobić w jQuery po załadowaniu strony, celując div, na przykład, jeśli ozdobisz ją css. Zależy to od tego, co chcesz z tym zrobić. W tym kontekście przycisk zamiast przycisku typu wejściowego. Jeśli nie planujemy przekazać argumentu do aplikacji zaplecza, wydaje się to bardziej odpowiednie.
Jean Paul AKA el_vete
IE: <przycisk onclick = "javascript: window.location.reload (true);"
Jean Paul AKA el_vete
11
location.href = location.href;
guilin 桂林
źródło
5
Nowoczesne przeglądarki ignorują to, ponieważ href się nie zmienia, więc nie trzeba go ponownie ładować. Powinieneś używać tego tylko jako trybu failover dla starych przeglądarek bez przeładowania: (location.reload? Location.reload (): location.href = location.href)
Radek Pech
@RadekPech Które starsze przeglądarki nie mają location.reload()?
Matthias
8

Aby było to łatwe i proste, użyj location.reload(). Możesz także użyć, location.reload(true)jeśli chcesz pobrać coś z serwera.

Jozuego
źródło
8

Za pomocą przycisku lub po prostu umieść go w tagu „a” (kotwicy):

<input type="button" value="RELOAD" onclick="location.reload();" />

Wypróbuj te dla innych potrzeb:

Location Objects has three methods --

assign() Used to load a new document
reload() Used to reloads the current document.
replace() Used to replace the current document with a new one
Arun Prasad ES
źródło
1
ciekawe ... co z <button> </button>? działa tak samo, prawda?
Jean Paul AKA el_vete
1
To działało jak urok! Zobacz moją odpowiedź poniżej :) Dzięki
Jean Paul AKA el_vete
4

Automatyczne ładowanie strony po 20 sekundach.

<script>
    window.onload = function() {
        setTimeout(function () {
            location.reload()
        }, 20000);
     };
</script>
Ali Chegini
źródło
4

Dziękuję, ten post był bardzo pomocny, nie tylko w celu ponownego załadowania strony z sugerowaną odpowiedzią, ale także dał mi pomysł na umieszczenie ikony przycisku jQuery w przycisku:

<button style="display:block; vertical-align:middle; height:2.82em;"
        title="Cargar nuevamente el código fuente sin darle un [Enter] a la dirección en la barra de direcciones"
        class="ui-state-active ui-corner-all ui-priority-primary" 
        onclick="javascript:window.location.reload(true);">
    <span style="display:inline-block;" class="ui-icon ui-icon-refresh"></span>
    &nbsp;[<b>CARGAR NUEVAMENTE</b>]&nbsp;
</button>

Edytowane, aby pokazać, jak to wygląda po włączeniu do projektu

02.07.2016

Przepraszam, ponieważ jest to osobisty projekt, który zakłada użycie jQuery UI, Themeroller, frameworku Icons, metod takich jak zakładki jQuery, ale jest w języku hiszpańskim;)

Jean Paul AKA el_vete
źródło
@Peter Mortensen: Dziękuję za edycję, że prototyp projektu został wykonany na studia, więc musiałem być w języku hiszpańskim na załączonych zrzutach ekranowych .. przepraszam za to .. Oczywiście, była potrzeba posiadania rdzenia związanego z interfejsem jQuery zależności, aby połączyć je ze sobą, takie jak: --- na przykład widget ThemeRoller jqueryui.com/themeroller i wtyczki takie jak: plugins.jquery.com/qTip2 , datatables.net .. sama biblioteka jQuery itp., ale akcja została wykonana na podstawie niektórych powyższych odpowiedzi: onclick = "javascript: window.location.reload (true);">!
Jean Paul AKA el_vete
3

To powinno działać:

window.location.href = window.location.href.split( '#' )[0];

lub

var x = window.location.href;
x = x.split( '#' );
window.location.href = x[0];

Wolę to z następujących powodów:

  • Usuwa część po #, zapewniając, że strona przeładuje się w przeglądarkach, które nie przeładują treści, która ją zawiera.
  • Nie pyta Cię, czy chcesz ponownie opublikować ostatnią treść, jeśli niedawno przesłałeś formularz.
  • Powinien działać nawet w najnowszych przeglądarkach. Testowane na Lasted Firefox i Chrome.

Alternatywnie, możesz użyć najnowszej oficjalnej metody do tego zadania

window.location.reload()
Ayoola Falola
źródło
3

Użyj tego przycisku, aby odświeżyć stronę

PRÓBNY

<input type="button" value="Reload Page" onClick="document.location.reload(true)">
Meysam
źródło
2

Metoda reload () służy do ponownego załadowania bieżącego dokumentu.

Metoda reload () działa tak samo jak przycisk reload w przeglądarce.

Domyślnie metoda reload () ponownie ładuje stronę z pamięci podręcznej, ale można zmusić ją do ponownego załadowania strony z serwera, ustawiając parametr forceGet na true: location.reload (true).

        location.reload();
GeniusGeek
źródło
-3

Możesz po prostu użyć

window.location=document.URL

gdzie document.URL pobiera bieżący adres URL strony, a window.location przeładowuje go.

Sanu Uthaiah Bollera
źródło
2
Nowoczesne przeglądarki ignorują to, ponieważ href się nie zmienia, więc nie trzeba go ponownie ładować. Powinieneś używać tego tylko jako trybu failover dla starych przeglądarek bez przeładowania: (location.reload? Location.reload (): location = document.URL)
Radek Pech