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

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

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.

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

location.reload();

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>

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

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

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 .

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.

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.

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ć.

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ż”.

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 (#).

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

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

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);
});

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

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.

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>

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();

posługiwać się

location.reload();

lub

window.location.reload();

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>

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);

Wszystkie odpowiedzi tutaj są dobre. Ponieważ pytanie dotyczy ponownego ładowania stronyjquery, 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ą jquerylub jquery oparta jest na javascript. Więc idź z czystymjavascript jest o wiele lepszy, jeśli chodzi o proste rzeczy.

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

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

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

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

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

Proste rozwiązanie JavaScript:

 location = location; 

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

Prawdopodobnie najkrótszy (12 znaków) - użyj historii

history.go()

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

Jest najkrótszy w JavaScript.

window.location = '';

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

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>