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

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

Author: Elijah Manor, 2011-03-23

21 answers

Użycie location.reload():

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

Funkcja reload() pobiera opcjonalny parametr, który można ustawić na true, aby wymusić przeładowanie z serwera, a nie pamięci podręcznej. Domyślnie parametr false, więc domyślnie strona może się przeładować z pamięci podręcznej przeglądarki.

 3395
Author: Roy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-19 20:20:35

To powinno działać na wszystkich przeglądarkach, nawet bez jQuery:

location.reload();
 417
Author: Thorben,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-14 16:11:34

Istnieje wiele nieograniczone sposoby 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)

    Jeśli chcemy wyciągnąć dokument z web-serwer ponownie (np. gdzie zawartość dokumentu zmiana dynamiczna) przekazalibyśmy argument jako true.

Możesz kontynuować listę jako Twórczy:

  • 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>
 355
Author: Ionică Bizău,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-01 14:50:41

Wiele sposobów będzie działać, jak sądzę:

  • window.location.reload();
  • history.go(0);
  • window.location.href=window.location.href;
 186
Author: David,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-29 08:46:43

Aby przeładować stronę jQuery, wykonaj:

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

Podejście tutaj, które użyłem był Ajax jQuery. Testowałem go na Chrome 13. Następnie umieszczam kod w handlerze, który uruchomi przeładowanie. URL to "", co oznacza ta strona.

 116
Author: Peter,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-14 13:11:40

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

window.location = window.location.pathname;

Zamiast

window.location.reload();

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

 99
Author: SumairIrshad,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-19 21:36:09

Pytanie powinno brzmieć:

Jak odświeżyć stronę z JavaScript

window.location.href = window.location.href; //This is a possibility
window.location.reload(); //Another possiblity
history.go(0); //And another
Jesteś rozpieszczona wyborem.
 58
Author: JohnP,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-10 08:43:32

Możesz użyć

location.reload(forceGet)

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

Wartością domyślną jest false, która przeładowuje stronę z pamięci podręcznej.

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

Lub po prostu

location.reload()

Jeśli chcesz szybko i łatwo z buforowania.

 50
Author: Pinch,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-14 16:15:41

Trzy podejścia o różnych zachowaniach związanych z pamięcią podręczną:

  • location.reload(true)

    W przeglądarkach, które implementują parametr forcedReload z location.reload(), przeładowuje się, 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 świeże kopie z serwera bez wysyłania nagłówków if-modified-since lub if-none-match w żądaniu.

    Odpowiednikiem użytkownika wykonującego "hard reload" w przeglądarkach, gdzie jest to możliwe.

    Należy pamiętać, że przekazywanie true do location.reload() jest obsługiwane w Firefoksie (zobacz MDN) i Internet Explorerze (zobacz MSDN), ale nie jest obsługiwane powszechnie i nie jest częścią specyfikacji W3 HTML 5, ani specyfikacji W3 draft HTML 5.1, ani specyfikacji WHATWG HTML standard życia.

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

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

    Przeładowuje stronę, pobierając świeżą, nie buforowaną kopię samego HTML strony i wykonując RFC 7234 żądania odnowienia zasobów (takich jak skrypty), które przeglądarka ma w pamięci podręcznej, nawet jeśli są to {64]} świeże czy RFC 7234 zezwala przeglądarce na ich serwowanie bez przedłużania ważności.

    Dokładnie jak przeglądarka powinna wykorzystywać swoją pamięć podręczną, gdy wykonanie wywołania location.reload() nie jest określone ani udokumentowane, o ile mogę powiedzieć; określiłem powyższe zachowanie poprzez eksperymenty.

    Jest to równoznaczne z naciśnięciem przez użytkownika przycisku "Odśwież" w swojej przeglądarce.

  • location = location (W przeciwieństwie do innych technik, które wymagają przypisania do location lub do jego właściwości)

    Działa tylko wtedy, gdy adres URL strony nie zawiera fragida / hashbang!

    Przeładowuje stronę bez refetchingu lub rewalidacji fresh resources from the cache. Jeśli sam 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 hash, nie będzie to miało żadnego wpływu.

    Ponownie, zachowanie buforowania jest nieokreślone, o ile wiem; określiłem to przez testuję.

Więc podsumowując, chcesz użyć:

  • W związku z tym, że strona nie posiada hasha w swoim adresie URL, nie będzie ona działać.]}
  • W niektórych przeglądarkach, np. Chrome, można pobrać nowe kopie wszystkich zasobów bez ich aktualizacji (chociaż nie są one powszechnie obsługiwane i nie będą zachowywać się inaczej niż w niektórych przeglądarkach).]}
  • location.reload() aby wiernie odtworzyć efekt kliknięcia przez użytkownika "odśwież" guzik.
 31
Author: Mark Amery,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-19 10:53:37

window.location.reload() przeładuje się z serwera i załaduje wszystkie Twoje dane, Skrypty, obrazy itp. jeszcze raz.

Więc jeśli chcesz odświeżyć HTML, window.location = document.URL powróci znacznie szybciej i przy mniejszym ruchu. Ale nie przeładuje strony, jeśli w adresie URL znajduje się hash ( # ).

 22
Author: Peter Mortensen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-14 16:14:31

Funkcja jQuery Load może również wykonać odświeżanie strony:

$('body').load('views/file.html', function () {
    $(this).fadeIn(5000);
});
 15
Author: Suleman Mirza,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-10 08:50:52

Oto rozwiązanie, które asynchronicznie przeładowuje stronę za pomocą jQuery. Unika migotania wywołanego przez window.location = window.location. Ten przykład pokazuje stronę, która ładuje się w sposób ciągły, tak jak na pulpicie nawigacyjnym. Jest testowany bojowo 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żywając $.ajax bezpośrednio jak $.get('',function(data){$(document.body).html(data)}) powoduje, że pliki css/js mają busted cache , nawet jeśli używasz cache: true, dlatego używamy parseHTML
  • parseHTML nie znajdzie body tag więc całe twoje ciało musi przejść w dodatkowy div, mam nadzieję, że ten nugget wiedzy pomoże Ci pewnego dnia, możesz zgadnąć, jak wybraliśmy id dla tego div
  • użyj http-equiv="refresh" na wypadek, gdyby coś poszło nie tak z czkawką javascript/serwera, strona nadal będzie się przeładowywać bez telefonu
  • takie podejście prawdopodobnie jakoś wycieka pamięć, http-equiv poprawki odświeżania, które
 13
Author: William Entriken,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-17 22:30:47

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

Simple plain JavaScript Solution :

Najprostszym sposobem jest rozwiązanie jednoliniowe umieszczone w odpowiedni sposób:

location.reload();

To, czego Wiele osób tutaj brakuje, ponieważ mają nadzieję zdobyć pewne "punkty", to to, że sama funkcja reload () oferuje wartość logiczną jako parametr (szczegóły: https://developer.mozilla.org/en-US/docs/Web/API/Location/reload).

The Miejsce.metoda reload () przeładowuje zasób z bieżącego URL. Jego opcjonalnym unikalnym parametrem jest Boolean, który, gdy jest true, powoduje, że strona jest zawsze przeładowywana z serwera. Jeśli jest false lub nie podano, przeglądarka może przeładować stronę z jej cache.

Oznacza to, że są dwa sposoby:

Rozwiązanie1: Wymuś przeładowanie bieżącej strony z serwera

location.reload(true);

Solution2: przeładowanie z cache lub serwera (w oparciu o przeglądarkę i Twój config)

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

A jeśli chcesz połączyć go z jQuery i odsłuchać Zdarzenie, polecam użycie".on () "metoda zamiast".click " lub inne opakowania zdarzeń, np. bardziej odpowiednim rozwiązaniem byłoby:

$('#reloadIt').on('eventXyZ', function() {
    location.reload(true);
});
 12
Author: Fer To,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-02 09:31:37

Znalazłem

window.location.href = "";

Lub

window.location.href = null;

Powoduje również odświeżanie strony.

To znacznie ułatwia przeładowanie strony usuwając jakikolwiek hash. Jest to bardzo miłe, gdy używam AngularJS w symulatorze iOS, dzięki czemu nie muszę ponownie uruchamiać aplikacji.

 11
Author: Mujah Maskey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-14 16:13:08

Możesz używać JavaScript location.reload() metoda. Ta metoda akceptuje parametr logiczny. true lub false. Jeżeli parametrem jest true; strona jest zawsze przeładowywana z serwera. Jeśli jest to false; które jest domyślne lub z pustym parametrem przeglądarka przeładuj stronę z jej pamięci podręcznej.

Z parametrem true

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

Z default/ false parametr

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

Używanie jquery

<button id="Reloadpage">Reload page</button>
<script type="text/javascript">
    $('#Reloadpage').click(function() {
        location.reload();
    }); 
</script>
 5
Author: Poorna Senani Gamage,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-06 10:58:22

Nie potrzebujesz niczego z jQuery, aby przeładować stronę za pomocą czystego JavaScript, wystarczy użyć funkcji reload na właściwości location, takiej jak ta:

window.location.reload();

Domyślnie spowoduje to ponowne załadowanie strony przy użyciu pamięci podręcznej przeglądarki (jeśli istnieje)...

Jeśli chcesz wykonać wymuszone przeładowanie strony, po prostu podaj wartość true do metody przeładowania, jak poniżej...

window.location.reload(true);

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

location.reload();
 5
Author: Alireza,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-27 04:53:24

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

Chciałem ukryć iframe ze strony po kliknięciu oh an h3, dla mnie to działało, ale nie byłem w stanie kliknąć elementu, który pozwolił mi zobaczyć iframe na początek, chyba że odświeżam przeglądarkę ręcznie...Nie idealnie.

Próbowałem:

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

Mieszanie zwykłego JavaScript Jane z Twoim jQuery powinno działać.

// 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);
 2
Author: J. Moreno,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-25 07:57:11

Użyj onclick="return location.reload();" wewnątrz znacznika przycisku.

<button id="refersh-page" name="refersh-page" type="button" onclick="return location.reload();">Refesh Page</button>
 1
Author: Frank,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-23 10:57:38

Proste Rozwiązanie Javascript:

 location = location; 

<button onClick="location = location;">Reload</button>
 1
Author: hev1,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-10 18:29:02

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

Używa wrappera jQuery i wyciąga natywny element dom.

Użyj tego, jeśli chcesz mieć jQuery feeling na swoim kodzie i nie dbasz o szybkość/wydajność kodu.

Po prostu wybierz od 1 do 10, które odpowiadają twoim potrzebom lub dodaj więcej na podstawie wzoru i odpowiedzi przed tym.

<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>
 1
Author: David Angulo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-19 06:56:16

Wszystkie odpowiedzi tutaj są dobre. Ponieważ pytanie określa o przeładowanie strony z jquery, pomyślałem, że dodam coś więcej dla przyszłych czytelników.

JQuery jest wieloplatformową biblioteką JavaScript zaprojektowaną w celu uproszczenia skryptów HTML po stronie klienta.

~ Wikipedia ~

Więc zrozumiesz, że fundament jquery lub jquery opiera się na javascript . Więc korzystanie z czystego javascript jest o wiele lepsze, jeśli chodzi o proste rzeczy.

Ale jeśli potrzebujesz jQuery rozwiązanie, tutaj jest jeden.

$(location).attr('href', '');
 1
Author: Roshana Pitigala,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-10-02 16:03:11