Auto-Refresh per JavaScript

  • Auto-Refresh per JavaScript ohne Reload-Flackern und weniger Datentransfer, anstelle von HTML und iFrames.

    Mit diesem kleinen Tutorial zeige ich dir, wie du mit JavaScript einen Auto-Refresh erstellst. Dies hat den Vorteil gegenüber dem META-Refresh von HTML, dass nicht die ganze Seite bzw. der ganze Inhalt in einem iFrame geladen werden muss. Das sieht besser aus und ist wesentlich schneller. Genutzt wird sowas z.B. auf Radio-Webseiten für die Anzeige des aktuell gespielten Titels.


    Dann fangen wir mal an....


    Als Erstes solltest du in deine Seite jQuery einbinden, falls noch nicht geschehen. Dazu packe folgende Zeile in den HEAD-Bereich deiner HTML-Seite:

    HTML
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


    Nun geht's zur eigentlichen Funktion:

    Wir nutzen dafür die JavaScript Bibliothek jQuery, die wir eben eingebunden haben. Den JavaScript Code den wir jetzt zusammen schreiben, musst du ebenfalls in den HEAD-Bereich deiner Seite setzen.


    Als erstes öffnen wir den SCRIPT-Tag, mit dem wir dem Browser sagen dass ab hier er JavaScript ausführen soll. Dafür beginnen wir mit dieser Zeile:


    HTML
    <script type="text/javascript">

    Darunter kommt nun unser JavaScript Code.


    Der JavaScript Code soll ausgeführt werden, wenn die Seite vollständig geladen ist. Das geschieht mit der Methode $(document).ready().

    Wir wollen also dass der Inhalt sofort mit dem Fertigladen der Webseite angezeigt wird.

    JavaScript
    $(document).ready(function() {
    $("#inhalt").load('https://deine-seite.de/inhalt.php?' + 1*new Date());
    var refreshId = setInterval(function() {
    $("#inhalt").load('https://deine-seite.de/inhalt.php?' + 1*new Date());
    }, 60000);
    });

    Erklärung der Funktion:

    Nachdem die Seite vollständig geladen wurde, lädt das Skript die Ausgabe der inhalt.php Datei und setzt den Inhalt in die ID #inhalt, die irgendwo in unserer Seite per DIV definiert ist (Dazu später mehr).

    Es wird ebenfalls die Funktion in ein Intervall gesetzt, welches in unserem Beispiel alle 60 Sekunden (1000 ms = 1 Sek) ausgeführt wird. Der Anhang ?' + 1*new Date() sorgt nur dafür, dass das Cachen der URL verhindert wird und keine alten Werte angezeigt werden.


    Wir beenden nun am Ende unser JavaScript mit dem HTML-Tag

    HTML
    </script>


    Die Funktion ist nun fertig. Aber es wird immer noch nichts auf der Seite angezeigt. Dafür sorgt nun der DIV-Tag.


    HTML
    <div id="inhalt"></div>

    Diesen DIV-Tag kannst du an eine gewünschte Stelle auf deiner Seite innerhalb des BODY-Tags einfügen.


    Nun sollte alles funktionieren.


    Sollte ich etwas vergessen haben oder du Fragen hast, dann stelle sie in unserem Forum.


    Viel Spaß

Teilen