Websites ständig von Hand neu zu laden kann mühsam sein. Lassen Sie die Maschine übernehmen. Als kleines Supplement zeigen wir Ihnen gleich noch, wie Sie auf der Website einen Livecountdown bis zum Refresh anzeigen.
Sie wissen vielleicht: Ich lebe in der Schweiz. Und da haben wir viermal jährlich Abstimmungen, welche ich intensiv verfolge. Für Abstimmungssonntage habe ich mir eine Ticker-Website zusammengestellt. Damit sie ständig aktualisiert wird, habe ich ein paar Gadgets eingebaut. Auch ohne Abstimmungen kann das mal hilfreich sein.
Automatischer Website-Reload im Minutentakt
Meine Website soll alle 60 Sekunden neu geladen werden, damit ich veränderte Daten (es könnte auch ein neues Webcam-Bild sein) sofort sehe. Dafür setze ich einen HTML-Tag in den <head>-Bereich meiner Website:
<meta http-equiv="refresh" content="60">Dieser Code aktualisiert die genau gleiche Website alle 60 Sekunden. Falls es länger (ode kürzer) dauern soll, lässt sich die Zahl 60 einfach durch etwas anderes ersetzen.
Sollte nach Ablauf des Refreshs übrigens nicht dieselbe Webseite, sondern eine andere – etwa für einen Willkommens- oder Splashscreen – dann lässt sich die Zeile leicht erweitern. Etwa so:
<meta http-equiv="refresh" content="60; URL=https://irgendeinedomain.ch/">Auch diese Zeile müsst in den <head>-Bereich Ihrer Website eingebunden werden.
Das mit dem automatischen Refresh hätten wir dann schon mal hinter uns. Nun die Kür:
Timer bis zum automatischen Reload anzeigen
Angenommen, Sie möchten wissen, wie aktuell die Anzeige gerade ist. Dann ist ein Timer praktisch, der bis zum Zeitpunkt des nächsten Reloads die Sekunden hinuterzählt. Da kommt ein klein wenig Script-Code ins Spiel. Diesen können Sie an der gewünschten Stelle Ihrer Webseite einfügen – User des Divi-Themes haben auch ein Codemodul zur Hand, in welches sie das folgende Script abfüllen können:
<script>
function countDown(secs,elem) {
var element = document.getElementById(elem);
element.innerHTML = "Seite wird automatisch neu geladen in "+secs+" Sekunden.";
if(secs < 1) {
clearTimeout(timer);
element.innerHTML = 'Moment ... lade Seite neu.';
}
secs--;
var timer = setTimeout('countDown('+secs+',"'+elem+'")',1000);
}
</script>
<div id="status"></div>
<script>countDown(60,"status");</script>
<p style="text-align: center;"><span style="text-decoration: underline;"><a href="https://irgendeinedomain.ch/">Seite manuell neu laden</a></span></p>Folgende Anpassungen sind denkbar:
- Zeile 4: Diese Zeile enthält den Text, wie er während des Countdowns angezeigt wird. Anstelle von +secs+ wird die verbleibende Sekundenzahl ausgegeben.
- Zeile 7: Dort wird – sofern nötig – eine Meldung über den Refresh angezeigt, sobald der Zeitpunkt dafür fällig ist.
- Zeile 14: Die Zahl 60 in dieser Zeile besagt, dass nach 60 Sekunden ein Refresh geschieht. Dieser Wert ist auch im Refresh-Tag im Head vermerkt und sollte natürlich mit Ihrem eigenen Fall übereinstimmen.
- Zeile 15: Zum Schluss noch ein Supplement der fakultativen Art: Folgende Zeile gibt einen Link aus, damit man den Refresh auch von Hand auslösen kann. Ist aber kein Must-Have.
So einfach geht das.
Werbung
Werbung
