Jak mogę odświeżyć stronę za pomocą jQuery?


2452

Jak mogę odświeżyć stronę za pomocą jQuery?


29
Ponieważ jQuery jest frameworkiem javascript do łatwej manipulacji DOM i wiązania zdarzeń, polecam poprosić o javascript zamiast jQuery.
WoIIe

19
Nie potrzebujesz do tego jQuery.
Stardust

13
Bardziej aktualne niż kiedykolwiek: needmorejquery.com
Kartik Chugh

@Stardust Nie potrzebujesz jQuery do czegokolwiek, co robisz z jQuery, ponieważ wszystko jest możliwe dzięki JavaScript, jeśli możesz to zrobić jQuery.
Jestem najbardziej głupią osobą

Odpowiedzi:


3826

Użyj location.reload():

$('#something').click(function() {
    location.reload();
});

reload()Funkcja przyjmuje opcjonalny parametr, który może być ustawiony true, aby wymusić reload z serwera, a nie w pamięci podręcznej. falseDomyślnym parametrem jest , więc strona może zostać ponownie załadowana z pamięci podręcznej przeglądarki.


29
To nie działało dla mnie. Działa to jednak: window.location.href = window.location.href;
Yster,

5
To nie działało dla mnie. window.location.href=window.location.href;i location.href=location.href;pracował.
twharmon

23
window.location.reload(true);mocno się odświeży, w przeciwnym razie domyślnie jest to fałsz
Sagar Naliyapara,

@Sagar N, to działa również dla mnie. Dziękuję Ci. Próbowałem przez ostatnie kilka dni z innym podejściem, ale twoje rozwiązanie mnie uratowało.
Ludus H

Po prostu biegnij window.location.reload()!

457

Powinno to działać we wszystkich przeglądarkach, nawet bez jQuery:

location.reload();

449

Istnieje wiele nieograniczonych sposobów odświeżania strony za pomocą JavaScript:

  1. location.reload()
  2. history.go(0)
  3. location.href = location.href
  4. location.href = location.pathname
  5. location.replace(location.pathname)
  6. location.reload(false)

    Gdybyśmy musieli ponownie pobrać dokument z serwera WWW (na przykład tam, gdzie zawartość dokumentu zmienia się dynamicznie), przekazalibyśmy argument jako true.

Możesz kontynuować kreatywność listy:

  • window.location = window.location
  • window.self.window.self.window.window.location = window.location
  • ... i inne 534 sposoby

var methods = [
  "location.reload()",
  "history.go(0)",
  "location.href = location.href",
  "location.href = location.pathname",
  "location.replace(location.pathname)",
  "location.reload(false)"
];

var $body = $("body");
for (var i = 0; i < methods.length; ++i) {
  (function(cMethod) {
    $body.append($("<button>", {
      text: cMethod
    }).on("click", function() {
      eval(cMethod); // don't blame me for using eval
    }));
  })(methods[i]);
}
button {
  background: #2ecc71;
  border: 0;
  color: white;
  font-weight: bold;
  font-family: "Monaco", monospace;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.5s ease;
  margin: 2px;
}
button:hover {
  background: #27ae60;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


10
+1 za listę i jsfiddle. Mam pytanie, w jsfiddle 1 i 6 sprawiają, że wygenerowana strona znika na chwilę, gdy jest przeładowywana, a 2-5 powoduje, że przeładowanie strony jest „niezauważalne”. W narzędziu deweloperskim w chrome widzę, że strona jest regenerowana, ale czy możesz wyjaśnić, że proces przerysowywania jest różny? Proszę. Z góry dziękuję.
Cԃ ա ԃ

@ Cԃ ա ԃ Nie widzę różnicy ... Może problemem jest pamięć podręczna? Zajrzę wkrótce.
Ionică Bizău

2
1 i 6 (reload()/(false))są wolniejsze. hmmm. ciekawy. :) oraz 1 i 6 są takie same, jak reload()domyślny parametr to false.
Cԃ ա ԃ

location.href = location.hrefzwykle używam, ale dziękuję za inne. Bardzo przydatne! +1
Amal Murali,

1
@ Cԃ ա ԃ Wreszcie mogę odtworzyć to, co widzisz, i poprosiłem tutaj .
Ionică Bizău

202

Przypuszczam, że działa wiele sposobów:

  • window.location.reload();
  • history.go(0);
  • window.location.href=window.location.href;

41
To nicwindow.location.href=window.location.href; nie da, jeśli twój adres URL ma # / hashbang na końcu example.com/something#blah:
AaronLS

18
W przypadku gdy ktoś zastanawia się, jaka jest różnica między location.reload()i history.go(0)brzmi: nie ma. Odpowiednia sekcja specyfikacji HTML 5 na w3.org/TR/html5/browsers.html#dom-history-go wyraźnie wskazuje, że są one równoważne: „Po go(delta)wywołaniu metody, jeśli argument metody został pominięty lub wartość zero, klient użytkownika musi działać tak, jakby location.reload()zamiast tego została wywołana metoda. ”
Mark Amery

Jedyny, który mi zadziałał, to: window.location.href = window.location.href;
Yster,

123

Aby ponownie załadować stronę za pomocą jQuery:

$.ajax({
    url: "",
    context: document.body,
    success: function(s,x){
        $(this).html(s);
    }
});

Podejście, którego tu użyłem, to Ajax jQuery. Przetestowałem go na Chrome 13. Następnie wstawiam kod do modułu obsługi, który uruchomi ponowne ładowanie. URL jest "", co oznacza, że na tej stronie .


68
Downvoting. To tak naprawdę nie odpowiada na pytanie, ale pokazuje, jak zastąpić HTML strony odpowiedzią Ajax. Różni się to od przeładowywania strony: na przykład pracuję teraz z sytuacją, w której nie rozwiązałoby to pierwotnego problemu.
Marnen Laibow-Koser

5
Jednym z problemów z przeładowaniem całego HTML w ten sposób jest ręczne wywoływanie zdarzeń onload / ready i ograniczenie nadpisywania wcześniej zadeklarowanych zmiennych, których stan możesz chcieć zachować po odświeżeniu.
PassKit

3
O ile nie jesteś bardzo ostrożny ze swoim kodem, spowoduje to wycieki pamięci w miejscu, w którym podłączyłeś programy obsługi zdarzeń i tym podobne, bez odłączania ich przed zamianą kodu, do którego są dołączone.
Daniel Llewellyn

Używam tego do przeładowywania naszego pulpitu nawigacyjnego co sekundę, zero migotania! To kometa / json api biedaka. Dzięki @DanielLlewellyn i in. dla ostrzeżeń.
William Entriken

3
Kilka osób skomentowało, że takie podejście jest przydatne do odświeżenia tylko części strony. To nie jest Myślę, że ci ludzie nie rozumieją contextparametru $.ajaxi oczekują, że w jakiś sposób wykona jakąś magię. Wystarczy ustawić thiswartość funkcji oddzwaniania . Ajax do adresu URL ""trafi w adres URL, na którym aktualnie się znajdujesz, tym samym zwykle ładując pełny kod HTML (w tym <html>i <head>i <body>), i nic w tej odpowiedzi nie odfiltrowuje rzeczy, których nie chcesz.
Mark Amery

107

Jeśli bieżąca strona została załadowana przez żądanie POST, możesz użyć

window.location = window.location.pathname;

zamiast

window.location.reload();

ponieważ window.location.reload()poprosi o potwierdzenie, jeśli zostanie wywołany na stronie załadowanej przez żądanie POST.


12
Spowoduje to jednak utratę kwerendy, podczas gdy window.location = window.location nie będzie
mrmillsy

@mrmillsy window.location = window.locationjest jednak również niedoskonały; nie robi nic, jeśli w bieżącym adresie URL jest fragment (hashbang).
Mark Amery

64

Pytanie powinno brzmieć

Jak odświeżyć stronę za pomocą JavaScript

window.location.href = window.location.href; //This is a possibility
window.location.reload(); //Another possiblity
history.go(0); //And another

Jesteś rozpieszczany wyborem.


55

Możesz użyć

location.reload(forceGet)

forceGet jest wartością logiczną i opcjonalną.

Wartość domyślna to false, która ponownie ładuje stronę z pamięci podręcznej.

Ustaw ten parametr na true, jeśli chcesz zmusić przeglądarkę do pobrania strony z serwera, aby pozbyła się również pamięci podręcznej.

Lub tylko

location.reload()

jeśli chcesz szybko i łatwo buforować.


41

Trzy podejścia z różnymi zachowaniami związanymi z pamięcią podręczną:

  • location.reload(true)

    W przeglądarkach, które implementują forcedReloadparametr location.reload(), ładuje ponownie, pobierając świeżą kopię strony i wszystkich jej zasobów (skrypty, arkusze stylów, obrazy itp.). Nie będzie obsługiwał żadnych zasobów z pamięci podręcznej - pobiera nowe kopie z serwera bez wysyłania żadnych if-modified-sincelub if-none-matchnagłówków w żądaniu.

    Odpowiednik dla użytkownika, który dokonuje „twardego przeładowania” w przeglądarkach, jeśli jest to możliwe.

    Należy pamiętać, że przekazywanie truedo location.reload()jest obsługiwane w Firefox (patrz MDN ) i Internet Explorer (patrz MSDN ), ale nie jest powszechnie obsługiwane i nie jest częścią specyfikacji W3 HTML 5 , ani specyfikacji W3 HTML HTML 5.1 , ani WHATWG HTML Living Standard .

    W nieobsługujących przeglądarkach, takich jak Google Chrome, location.reload(true)zachowuje się tak samo jak location.reload().

  • location.reload() lub location.reload(false)

    Ponownie ładuje stronę, pobiera świeżą, niebuforowaną kopię samego kodu HTML strony i wykonuje żądania ponownej walidacji RFC 7234 dla dowolnych zasobów (takich jak skrypty), które są buforowane w przeglądarce, nawet jeśli są one świeże, RFC 7234 pozwala przeglądarce na wyświetlanie je bez przedłużenia ważności.

    Dokładnie, w jaki sposób przeglądarka powinna wykorzystywać swoją pamięć podręczną podczas wykonywania location.reload()połączenia, nie jest określona ani udokumentowana, o ile wiem; Powyższe zachowanie określiłem eksperymentalnie.

    Jest to równoważne z naciśnięciem przez użytkownika przycisku „Odśwież” w przeglądarce.

  • location = location(lub nieskończenie wiele innych możliwych technik, które wymagają przypisania do locationlub do jego właściwości)

    Działa tylko, jeśli adres URL strony nie zawiera fragmentu / hashbang!

    Przeładowuje strony bez refetching lub przedłużania żadnych świeżych zasobów z pamięci podręcznej. Jeśli sam kod HTML strony jest świeży, spowoduje to ponowne załadowanie strony bez wykonywania żadnych żądań HTTP.

    Jest to równoważne (z perspektywy buforowania) dla użytkownika otwierającego stronę w nowej karcie.

    Jeśli jednak adres URL strony zawiera skrót, nie będzie to miało wpływu.

    Ponownie, o ile wiem, zachowanie w pamięci podręcznej jest nieokreślone; Ustaliłem to na podstawie testów.

Podsumowując, chcesz użyć:

  • location = locationdla maksymalnego wykorzystania pamięci podręcznej, o ile strona nie ma skrótu w adresie URL, w którym to przypadku nie zadziała
  • location.reload(true)aby pobrać nowe kopie wszystkich zasobów bez ponownej walidacji (chociaż nie jest to powszechnie obsługiwane i nie będzie się zachowywać inaczej niż location.reload()w niektórych przeglądarkach, takich jak Chrome)
  • location.reload() aby wiernie odtworzyć efekt kliknięcia przez użytkownika przycisku „odśwież”.

+1 za lokalizację = lokalizacja; wydaje się, że
niewielu

@Brandito Co ważniejsze, location = locationnie działa, jeśli w adresie URL znajduje się skrót. W przypadku każdej witryny używającej fragmentów - a nawet każdej witryny, w której ktoś prowadzący do strony może dodać fragment do adresu URL - powoduje to uszkodzenie.
Mark Amery

26

window.location.reload() przeładuje z serwera i ponownie załaduje wszystkie dane, skrypty, obrazy itp.

Jeśli więc po prostu chcesz odświeżyć HTML, window.location = document.URLpowróci on znacznie szybciej i przy mniejszym ruchu. Ale nie przeładuje strony, jeśli w adresie URL znajduje się skrót (#).


Takie zachowanie jest prawdziwe przynajmniej w Chrome - location.reload()wymusza ponowną walidację buforowanych zasobów, nawet bez argumentów, podczas gdy z window.location = document.URLprzyjemnością podaje buforowane zasoby bez uderzania w serwer, dopóki są one świeże.
Mark Amery

17

Funkcja jQuery Loadmoże również wykonać odświeżenie strony:

$('body').load('views/file.html', function () {
    $(this).fadeIn(5000);
});

4
Nie, to nie jest odświeżanie strony.
Mark Amery

16

Ponieważ pytanie jest ogólne, spróbujmy podsumować możliwe rozwiązania odpowiedzi:

Proste proste rozwiązanie JavaScript :

Najłatwiejszym sposobem jest umieszczenie jednego wiersza w odpowiedni sposób:

location.reload();

Wiele osób tutaj brakuje, ponieważ liczą na zdobycie „punktów”, ponieważ sama funkcja reload () oferuje jako parametr logiczny (szczegóły: https://developer.mozilla.org/en-US/docs/Web / API / Location / reload ).

Metoda Location.reload () ponownie ładuje zasób z bieżącego adresu URL. Jego opcjonalnym unikalnym parametrem jest wartość logiczna, która, jeśli jest prawdziwa, powoduje, że strona jest zawsze ładowana ponownie z serwera. Jeśli jest to fałsz lub nie zostało określone, przeglądarka może ponownie załadować stronę z pamięci podręcznej.

Oznacza to, że istnieją dwa sposoby:

Rozwiązanie 1: Wymuś ponowne załadowanie bieżącej strony z serwera

location.reload(true);

Rozwiązanie 2: Ponowne ładowanie z pamięci podręcznej lub serwera (w zależności od przeglądarki i konfiguracji)

location.reload(false);
location.reload();

A jeśli chcesz połączyć to z jQuery i nasłuchiwaniem zdarzenia, polecam użycie metody „.on ()” zamiast „.click” lub innych opakowań zdarzeń, np. Bardziej odpowiednim rozwiązaniem byłoby:

$('#reloadIt').on('eventXyZ', function() {
    location.reload(true);
});

15

Oto rozwiązanie, które asynchronicznie ładuje stronę za pomocą jQuery. Pozwala to uniknąć migotania spowodowanego przez window.location = window.location. Ten przykład pokazuje stronę, która jest ładowana w sposób ciągły, jak na pulpicie nawigacyjnym. Jest testowany w walce i działa na telewizorze z wyświetlaczem informacyjnym na Times Square.

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <meta http-equiv="refresh" content="300">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <script>
    function refresh() {
      $.ajax({
        url: "",
        dataType: "text",
        success: function(html) {
          $('#fu').replaceWith($.parseHTML(html));
          setTimeout(refresh,2000);
        }
      });
    }
    refresh();
    </script>
  </head>
  <body>
    <div id="fu">
      ...
    </div>
  </body>
</html>

Uwagi:

  • Używanie $.ajaxbezpośrednio jak $.get('',function(data){$(document.body).html(data)}) powoduje, że pliki css / js są pomijane w pamięci podręcznej , nawet jeśli używasz cache: true, dlatego używamyparseHTML
  • parseHTMLNIE znajdzie bodytagu, więc całe twoje ciało musi przejść w dodatkowy div, mam nadzieję, że ten samorodek wiedzy pomoże ci któregoś dnia, możesz zgadnąć, jak wybraliśmy id do tegodiv
  • Użyj http-equiv="refresh"na wypadek, gdyby coś poszło nie tak z czkawką javascript / server, strona WCIĄŻ przeładuje się bez połączenia telefonicznego
  • To podejście prawdopodobnie w jakiś sposób wycieka pamięć, http-equivodświeżenie to naprawia

14

znalazłem

window.location.href = "";

lub

window.location.href = null;

powoduje również odświeżenie strony.

Dzięki temu znacznie łatwiej jest ponownie załadować stronę, usuwając wszelkie skróty. Jest to bardzo miłe, gdy używam AngularJS w symulatorze iOS, więc nie muszę ponownie uruchamiać aplikacji.


niezła sesja, nie byłam tego świadoma.
Junaid Atari

9

Możesz użyć metody JavaScript location.reload() . Ta metoda akceptuje parametr boolowski. truelub false. Jeśli parametrem jest true; strona zawsze przeładowywana z serwera. Jeśli tak jest false; która jest domyślna lub przy pustej przeglądarce parametrów przeładuj stronę z pamięci podręcznej.

Z trueparametrem

<button type="button" onclick="location.reload(true);">Reload page</button>

Za pomocą parametru default/false

 <button type="button" onclick="location.reload();">Reload page</button>

Korzystanie z jquery

<button id="Reloadpage">Reload page</button>
<script type="text/javascript">
    $('#Reloadpage').click(function() {
        location.reload();
    }); 
</script>

8

Nie potrzebujesz niczego z jQuery, aby przeładować stronę za pomocą czystego JavaScript , po prostu użyj funkcji przeładowania we właściwości location, jak to:

window.location.reload();

Domyślnie strona zostanie ponownie załadowana przy użyciu pamięci podręcznej przeglądarki (jeśli istnieje) ...

Jeśli chcesz wymusić przeładowanie strony, po prostu przekaż prawdziwą wartość, aby przeładować metodę jak poniżej ...

window.location.reload(true);

Również jeśli jesteś już w zakresie okna , możesz pozbyć się okna i wykonać:

location.reload();

8

posługiwać się

location.reload();

lub

window.location.reload();

OP wspomniał konkretnie „z jQuery” (chociaż, jak już wielu zauważyło, być może nie powinno to być pytanie jQuery)
RomainValeri

3

Użyj onclick="return location.reload();"w tagu przycisku.

<button id="refersh-page" name="refersh-page" type="button" onclick="return location.reload();">Refesh Page</button>

3

Jeśli używasz jQuery i chcesz odświeżyć, spróbuj dodać swoją jQuery w funkcji javascript:

Chciałem ukryć element iframe na stronie po kliknięciu przycisku oh h3, dla mnie to zadziałało, ale nie byłem w stanie kliknąć elementu, który pozwolił mi wyświetlić na iframepoczątku, chyba że ręcznie odświeżyłem przeglądarkę ... nie idealnie.

Próbowałem następujące:

var hide = () => {
    $("#frame").hide();//jQuery
    location.reload(true);//javascript
};

Powinno działać mieszanie zwykłego javascript Jane z jQuery.

// code where hide (where location.reload was used)function was integrated, below    
    iFrameInsert = () => {
        var file = `Fe1FVoW0Nt4`;
        $("#frame").html(`<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/${file}\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe><h3>Close Player</h3>`);
        $("h3").enter code hereclick(hide);
}

// View Player 
$("#id-to-be-clicked").click(iFrameInsert);

3

Wszystkie odpowiedzi tutaj są dobre. Ponieważ pytanie dotyczy ponownego ładowania strony, Właśnie pomyślałem o dodaniu czegoś więcej dla przyszłych czytelników.

jQuery to wieloplatformowa biblioteka JavaScript zaprojektowana w celu uproszczenia skryptów HTML po stronie klienta.

~ Wikipedia ~

Więc zrozumiesz, że podstawą lub oparta jest na . Więc idź z czystym jest o wiele lepszy, jeśli chodzi o proste rzeczy.

Ale jeśli potrzebujesz rozwiązanie, oto jedno.

$(location).attr('href', '');

2

Istnieje wiele sposobów na ponowne załadowanie bieżących stron, ale w jakiś sposób przy użyciu tych metod można zobaczyć stronę zaktualizowaną, ale nie będzie tam kilka wartości pamięci podręcznej, więc obejmij ten problem lub jeśli chcesz wysyłać trudne żądania, użyj poniższego kodu.

    location.reload(true);
    //Here, it will make a hard request or reload the current page and clear the cache as well.


    location.reload(false); OR location.reload();
    //It can be reload the page with cache

2
<i id="refresh" class="fa fa-refresh" aria-hidden="true"></i>

<script>
$(document).on('click','#refresh',function(){
   location.reload(true);
});
</script>

Sugeruje to niewiele odpowiedzi.
Dharman

Niesamowite to również aktualizacja z serwera
Alemoh Rapheal Baja

1

Proste rozwiązanie JavaScript:

 location = location; 

<button onClick="location = location;">Reload</button>



1

Możesz to napisać na dwa sposoby. 1st to standardowy sposób przeładowywania strony, zwany również prostym odświeżaniem

location.reload(); //simple refresh

A inny nazywa się twardym odświeżaniem . Tutaj przekazujesz wyrażenie logiczne i ustawiasz na true. Spowoduje to ponowne załadowanie strony niszcząc starszą pamięć podręczną i wyświetlając zawartość od zera.

location.reload(true);//hard refresh

1
Na tej stronie ogólnie nie są mile widziane odpowiedzi kodowe. Czy możesz zredagować swoją odpowiedź, dodając komentarze lub wyjaśnienia do swojego kodu? Wyjaśnienia powinny odpowiadać na pytania takie jak: Co to robi? Jak to robi? Dokąd to zmierza? Jak rozwiązuje problem OP? Zobacz: Jak odpowiedzieć . Dzięki!
Eduardo Baitello,


0
$(document).on("click", "#refresh_btn", function(event) 
{
     window.location.replace(window.location.href);
});

-1

Oto kilka wierszy kodu, których można użyć do przeładowania strony za pomocą jQuery .

Używa opakowania jQuery i wyodrębnia natywny element dom.

Użyj tego, jeśli chcesz mieć wrażenie jQuery w kodzie i nie zależy ci na szybkości / wydajności kodu.

Po prostu wybierz od 1 do 10, które odpowiadają Twoim potrzebom, lub dodaj więcej w oparciu o wzorzec i odpowiedzi wcześniej.

<script>
  $(location)[0].reload(); //1
  $(location).get(0).reload(); //2
  $(window)[0].location.reload(); //3
  $(window).get(0).location.reload(); //4
  $(window)[0].$(location)[0].reload(); //5
  $(window).get(0).$(location)[0].reload(); //6
  $(window)[0].$(location).get(0).reload(); //7
  $(window).get(0).$(location).get(0).reload(); //8
  $(location)[0].href = ''; //9
  $(location).get(0).href = ''; //10
  //... and many other more just follow the pattern.
</script>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.