javascript - without - jquery reload page after seconds




Wie kann ich eine Seite mit jQuery aktualisieren? (15)

Wie kann ich eine Seite mit jQuery aktualisieren?


Alle Antworten hier sind gut. Da die Frage über das Neuladen der Seite mit jquery , dachte ich nur daran, etwas mehr für zukünftige Leser hinzuzufügen.

jQuery ist eine plattformübergreifende JavaScript-Bibliothek , die das clientseitige Scripting von HTML vereinfacht.

~ Wikipedia ~

Sie werden verstehen, dass die Grundlage von jquery oder jquery auf javascript basiert. Mit reinem javascript ist es also viel einfacher, wenn es um einfache Dinge geht.

Wenn Sie jedoch eine jquery Lösung benötigen, finden Sie hier eine.

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

Da die Frage generisch ist, versuchen wir, mögliche Lösungen für die Antwort zusammenzufassen:

Einfache einfache JavaScript-Lösung :

Der einfachste Weg ist eine einzeilige Lösung, die entsprechend platziert ist:

location.reload();

Was viele Leute hier vermissen, weil sie hoffen, einige "Punkte" zu bekommen, ist, dass die reload () - Funktion selbst einen Boolean als Parameter bietet (Details: location.reload() ).

Die Location.reload () -Methode lädt die Ressource von der aktuellen URL neu. Sein optionaler einzigartiger Parameter ist ein boolescher Parameter. Wenn dies der Fall ist, wird die Seite immer vom Server neu geladen. Wenn es falsch ist oder nicht angegeben wurde, lädt der Browser die Seite möglicherweise neu aus dem Cache.

Dies bedeutet, dass es zwei Möglichkeiten gibt:

Lösung 1: Erzwingen Sie das erneute Laden der aktuellen Seite vom Server

location.reload(true);

Lösung2: Neuladen vom Cache oder Server (basierend auf dem Browser und Ihrer Konfiguration)

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

Und wenn Sie es mit jQuery kombinieren möchten, um ein Ereignis anzuhören, würde ich empfehlen, die ".on ()" -Methode anstelle von ".click" oder anderen Ereignis-Wrappern zu verwenden. Eine richtige Lösung wäre zB:

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

Die jQuery Load Funktion kann auch eine Seitenaktualisierung durchführen:

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

Dies sollte auf allen Browsern auch ohne jQuery funktionieren:

location.reload();

Es gibt viele Möglichkeiten, eine Seite mit JavaScript zu aktualisieren:

  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)

    Wenn das Dokument erneut vom Webserver abgerufen werden muss (z. B. wo sich der Dokumentinhalt dynamisch ändert), übergeben wir das Argument als true .

Sie können die Liste als kreativ fortsetzen:

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>


Hier ist eine Lösung, die eine Seite asynchron mit jQuery neu lädt. Es vermeidet das Flimmern durch window.location = window.location . Dieses Beispiel zeigt eine Seite, die wie in einem Dashboard kontinuierlich neu geladen wird. Es ist kampferprobt und läuft auf einem Informationsdisplay auf dem 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>

Anmerkungen:

  • $.ajax direkte Verwendung von $.ajax wie $.get('',function(data){$(document.body).html(data)}) bewirkt, dass css / js-Dateien Cache-Speicher erhalten , selbst wenn Sie cache: true , Deshalb verwenden wir parseHTML
  • parseHTML findet parseHTML body Tag, also muss Ihr ganzer Körper in ein extra div gehen. Ich hoffe, dieses Wissen hilft Ihnen eines Tages, Sie können erraten, wie wir die id für dieses div
  • Verwenden Sie http-equiv="refresh" falls etwas mit javascript / server hiccup nicht funktioniert. Die Seite wird AUSSCHLIESSLICH neu geladen, ohne dass Sie einen Anruf erhalten
  • Dieser Ansatz verliert wahrscheinlich Speicherplatz, der http-equiv Refresh behebt dies

In JavaScript ist es am kürzesten.

location = '';

Möglicherweise möchten Sie verwenden

location.reload(forceGet)

forceGet ist ein Boolean und optional.

Der Standardwert ist false, wodurch die Seite aus dem Cache geladen wird.

Setzen Sie diesen Parameter auf "true", wenn Sie den Browser zwingen möchten, die Seite vom Server abzurufen, um auch den Cache zu löschen.

Oder nur

location.reload()

wenn Sie schnell und einfach mit dem Caching wollen.


Sie können die JavaScript- Methode location.reload() verwenden. Diese Methode akzeptiert einen booleschen Parameter. true oder false Wenn der Parameter true ; Die Seite wurde immer vom Server neu geladen. Wenn es false ; Dies ist die Standardeinstellung oder lädt die Seite mit leerem Parameter-Browser aus dem Cache.

Mit true Parameter

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

Mit default / false

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

Jquery verwenden

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

So laden Sie eine Seite mit jQuery erneut:

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

Der Ansatz, den ich hier verwendete, war Ajax jQuery. Ich habe es auf Chrome 13 getestet. Dann füge ich den Code in den Handler ein, der das Neuladen auslöst. Die URL lautet "" , was diese Seite bedeutet.


Viele Möglichkeiten funktionieren, denke ich:

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

Wenn Sie jQuery verwenden und eine Aktualisierung durchführen möchten, fügen Sie Ihre jQuery in einer JavaScript-Funktion hinzu:

Ich wollte einen iframe von einer Seite ausblenden, wenn Sie auf a und ein h3 klicken. Für mich funktionierte das, aber ich konnte nicht auf das Element klicken, mit dem ich den iframe anzeigen konnte, es sei denn, ich habe den Browser manuell aktualisiert. Nicht ideal .

Ich habe folgendes versucht:

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

Das Mischen von einfachem Jane-Javascript mit Ihrer jQuery sollte funktionieren.

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

ich fand

window.location.href = "";

oder

window.location.href = null;

macht auch eine Seite aktualisieren.

Dies macht es sehr viel einfacher, die Seite erneut zu laden, indem ein Hash entfernt wird. Das ist sehr schön, wenn ich AngularJS im iOS-Simulator verwende, sodass ich die App nicht erneut ausführen muss.


window.location.reload() wird vom Server neu geladen und lädt alle Ihre Daten, Skripts, Bilder usw. erneut.

Wenn Sie also nur den HTML- window.location = document.URL möchten, wird window.location = document.URL viel schneller und mit weniger Verkehr zurückgegeben. Die Seite wird jedoch nicht neu geladen, wenn die URL einen Hash (#) enthält.


Verwenden Sie location.reload() :

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

Die Funktion reload() benötigt einen optionalen Parameter, der auf true , um ein Neuladen vom Server anstelle des Caches zu erzwingen. Der Parameter ist standardmäßig auf " false , sodass die Seite standardmäßig aus dem Cache des Browsers geladen wird.





reload