 Seite neu laden - refresh
Sie möchten ihrem Besucher immer die aktuelle Version der Seite anzeigen lassen, ein Laden vom Server erzwingen und einen entsprechenden Button anbieten? Einige Lösungsmöglichkeiten möchte ich kurz erklären.
|
|
Seite neu laden / vom Server neu laden
... nur ein kleiner Hinweis für Zwischendurch
Hintergrund: Abhängig von den Browsereinstellungen werden Inhalte einer Webseite nicht immer vom Server erneut abgerufen, wenn die Seite vorher bereits besucht worden war. Um Schnelligkeit vorzugaukeln oder aus Gründen der Wirtschaftlichkeit, wird die HTML-Seite (Textinhalte, Grafiken, ...) oft aus dem Zwischenspeicher des Browsers geladen. Die Daten stammen dann aus dem Cache (Browser-Cache) [englisch cache sprich: Käsch]
Die Untersuchung des Browsers für die Entscheidung, ob die gesamten Inhalte wirklich vom Server angefordert werden, bezieht sich auf diese Information:
(... und bevor mich die echten Spezialisten erschlagen: Ja, es gibt auch noch den Proxy-Cache. Aber das führt hier für eine einfache Erklärung zu weit).
 Was ist ein Cache?
Begriffserklärung von Wikipedia.
Seite neu laden
Sie können die Seite erneut abrufen und hoffen, dass Sie die neueste Version der Seite vom Server erhalten.
|
|
Der bloße Klick auf den REFRESH-Button des Browsers garantiert einen Abruf der Seiten vom Server und die Darstellung der neuesten Version nicht. So bleibt dem Seitenbesucher auch nach dem erneuten Laden ihr letztes Update unter Umständen vorenthalten.
Browser(Versions-)-Abhängig helfen auch die Kombinationen von STRG + neu Laden, SHIFT + neu Laden nicht! Besonders der IE6 sträubt sich mit Händen und Füßen.
Ziel: Sie möchten sicherstellen, das ihrem Seitenbesucher die aktuelle Version einer Webseite angezeigt wird. Dazu bieten sie einen Reload-Link an. Nun kann man per Mausklick ein Neuladen vom Server erzwingen und muss nicht umständlich mit STRG-Taste + Klick auf den Reload-Botten des Browsers arbeiten.
Für PHP-Seiten stellt sich die Situation natürlich anders dar, ebenso für HTML-Seiten die durch META-Angaben immer neu angefordert werden oder bei denen ein Zwischenspeichern im Cache verhindert wird.
Meta-Tags
Diese Vorkehrung zum Erzwingen des 'Neu-Ladens' ist immer wichtig, wenn es z.B. um aktuelle Angebote, Preise und Neuigkeiten geht!
Meta-Tags im Head-Bereich der Seite:
- Pragma: no-cache
- Cache-Control: no-cache
- Expires: Zeitwert für die Vergangenheit eintragen
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="-1">
Expires steht für "Ablaufdatum" und legt die Gültigkeitsdauer fest. Sollte das nicht greifen hilft nur eine serverseitige Lösung die sicherstellt, das immer die aktuelle Version gesendet wird.
Zwischenbemerkung für die asp-Spezialisten:
Response.Expires = 0
Response.ExpiresAbsolute = DateAdd("d",-1,now())
Response.AddHeader "pragma","no-cache"
Response.AddHeader "cache-control","private"
Response.CacheControl = "no-cache"
Seite neu laden mit HTML (keine befriedigende Lösung)
Nichts ist einfacher als das. Einen Link als HTML-Tag für den simplen Aufruf der gleichen Seite notieren. Das gibt allerdings keine Garantie für einen Serverabruf für diese Seite:
<a href="dateiname.htm">Seite neu laden</a>
Seite neu laden mit JavaScript 1 (keine befriedigende Lösung)
Dazu wird eine JavaScript-Anweisung zum Neuladen eingetragen. Das gibt in dieser Form ebenfalls keine Garantie für einen Serverabruf für die Seite:
<a href="javascript:location.reload()">Seite neu laden</a>
Seite neu laden mit JavaScript 2 (bessere Lösung)
Dazu wird eine JavaScript-Anweisung zum Neuladen notiert. Der Eintrag des Parameters 'true' garantiert einen erneuten Serverabruf für die Seite! Den Unterschied zu den beiden Reloads oben wird man in der benötigten Zeit für Abruf und Aufbau der Seite bemerken.
<a href="javascript:location.reload(true)">Seite neu laden</a>
Natürlich kann man diese JavaScript-Lösungen nicht nur über einen Klick sondern auch zeitgesteuert (automatisch nach wenigen Sekunden) ausführen lassen. Man muss halt nur dafür sorgen, dass die ganze Angelegenheit nicht in einer ewigen Schleife endet.
Varianten
a Mit einem Event-Handler
Hier hätten sie die Möglichkeit das 'onClick' durch jeden Event-Handler auszutauschen (z.B. onMouseover), um das Reload durch ein spezielles Vorkommnis (Event) auszulösen.
onClick würden sie durch den entsprechenden  Event-Handler ersetzen.
<a href="javascript:void(0)" onclick="top.window.location.reload(true)">Neu laden</a>
onClick, onKeydown, onSubmit, ...
b Laden eines bestimmten Frames
Die Anweisung kann irgendwo, auch in einem anderen Frame, notiert werden. Tragen sie den Namen des Frames entsprechend ein.
Für ××× tragen sie die entsprechende Anweisung ein:
<a href="×××">Neu laden</a>
javascript:top.window.Framename.location.reload(true);
c Laden von 2 (oder mehr) bestimmten Frames
Die Anweisung kann irgendwo, auch in einem anderen Frame, notiert werden. Tragen sie die Namen der Frames entsprechend ein.
Für ××× tragen sie die entsprechende Anweisung ein:
<a href="×××">Neu laden</a>
javascript:top.window.Framename1.location.reload(true);
javascript:top.window.Framename2.location.reload(true);
(Anweisungen hintereinander ohne Zeilenumbruch eintragen)
d Reload mit Formularbutton
Die Anweisung zum Reload wird beim Event 'Klicken' ausgelöst. Die JavaScript-Anweisung dazu ist 'onClick'.
|
|
|
|
unformatierter Button
|
CSS-formatierter Button
|
Quellcode für den Button 1
<form>
<input type="button" value="Seite neu laden" onClick="window.location.reload(true)">
</form>
Quellcode für den Button 2
<form>
<input class="button10" type="button" value="Seite neu laden" ... >
</form>
CSS-Anweisungen im Head-bereich für den 2. Button
<style type="text/css">
<!--
.button10 {
cursor: pointer;
font:11px Arial, Helvetica;
color:#000000;
background-color: #DDDDFF;
width:120px;
}
-->
</style>
Buttons
Eine kleine Auswahl von Reload-Symbolen in diversen Farben stelle ich zur kostenlosen Nutzung auf den Seiten meiner Mini-Image-Box zur Verfügung (Menü: Grafik-Buttons).
  
 Mini-Image-Box (7000 kostenlose Grafiken) 
Formularbuttons mit CSS formatieren 1
Formularbuttons mit CSS formatieren 2
Textlinks ohne Unterstrich mit CSS formatieren
| 
Home • Tipps • Seite neu laden
Seite neu laden