Hash und Reload

[heinetz]

Hallo Forum,

auf meiner Seite unter der URL http://example.dev gibt es einen Link mit dem href="#example". Klicke ich den Link, ändert sich die in der Adresszeile angezeigte URL in http://example.dev/#example und die Seite scrollt nach einem HTML-Element mit der id="example" sofern es das gibt (ohne Reload). Ausserdem kann ich den Event hashchange mit JS abfangen und entspr. darauf eingehen. Wenn ich danach mit dem Back-Button des Browsers wieder auf die ursprüngliche URL wechsle, ist das Verhalten identisch. Wenn ich aber statt den Back-Button zu verwenden auf einen Link mit href="http://example.dev" wird die ursprüngliche Seite neu geladen.

Kann mir jemand erklären, warum?

danke und

gruss, heinetz

[Camping_RIDER]

Aloha ;)

Wenn ich danach mit dem Back-Button des Browsers wieder auf die ursprüngliche URL wechsle, ist das Verhalten identisch. Wenn ich aber statt den Back-Button zu verwenden auf einen Link mit href="http://example.dev" wird die ursprüngliche Seite neu geladen.

Kann mir jemand erklären, warum?

Der Back-Button steuert meist nicht etwa die URL neu an, sondern nimmt das, was im Browser-Cache ist, her. Das führt manchmal zu interessanten Ergebnissen bei Betätigung des Back-Button (veraltete Informationen). Wenn du die Seite über einen Link aufrufst, forderst du den Browser ja auf, die Resource unter dieser URL zu laden - und die kommt in den meisten Fällen eben nicht aus dem Cache. Du könntest ja da auch auf deiner Seite Informationen haben, die sich regelmäßig ändern, deshalb ist ein neu-laden da angebracht. Beim Back-Button willst du ja die Informationen "von vorhin". Du kannst die Funktion des Back-Buttons nur mit window.back exakt nachbilden.

Grüße,

RIDER

[heinetz]

na gut, allerdings …

wenn ich von der Seite mit der URL http://example.dev auf den Link href="http://example.dev/#example" klicke, merkt der Browser, dass sich an der URL nur der Hash ändert und reagiert darauf, indem er das Ziel auf der bereits geladenen Seite sucht, statt die Seite zu laden. (http://example.dev -> http://example.dev/#example)

wenn ich von der Seite mit der URL http://example.dev/#example auf den Link href="http://example.dev/#other" klicke, merkt der Browser auch, dass sich an der URL nur der Hash ändert und reagiert darauf, indem er das Ziel auf der bereits geladenen Seite sucht, statt die Seite zu laden. (http://example.dev/#example -> http://example.dev/#other)

wenn ich von der Seite mit der URL http://example.dev/#example auf den Link href="http://example.dev/#" klicke, merkt der Browser auch, dass sich an der URL nur der Hash ändert und reagiert darauf, indem er das Ziel auf der bereits geladenen Seite sucht, statt die Seite zu laden. (http://example.dev/#example -> http://example.dev/#)

ABER wenn ich von der Seiten mit der URL http://example.dev/#example auf den Link href="http://example.dev/" klicke, merkt der Browser NICHT, dass sich an der URL nur der Hash ändert obwohl er sich im Vergleich zum ersten nur durch die Richtung. (http://example.dev/#example -> http://example.dev/)

gruss, heinetz

[Camping_RIDER]

Aloha ;)

Lass mich deine Beobachtung anders formulieren, vielleicht wird dir das Konzept im Browser dann klarer:

Immer dann, wenn im Linkziel ein Fragmentbezeichner vorkommt und^[1] der Browser feststellt, dass (bis auf den Fragmentbezeichner) die selbe URL verwendet wurde, lädt der Browser die Seite nicht neu, sondern springt zum entsprechenden Anker.

Dieser Satz erklärt das Konzept vollständig 😉

Insbesondere auch, warum href="http://example.dev/" eben keinen Ankersprung auslöst (denn es ist ja kein Anker angegeben und Ankersprung gibts nur bei Fragmentbezeichner-Angabe).

Grüße,

RIDER

---

1. Ein Verweisziel href="href="http://example.dev/?test=true#anker" führt ebenfalls ein erneutes Laden der Seite aus. Die URL muss also wirklich bis auf den Fragmentbezeichner übereinstimmen. ↩︎

[heinetz]

Immer dann, wenn im Linkziel ein Fragmentbezeichner vorkommt und[^1] der Browser feststellt, dass (bis auf den Fragmentbezeichner) die selbe URL verwendet wurde, lädt der Browser die Seite nicht neu, sondern springt zum entsprechenden Anker.

Dieser Satz erklärt das Konzept vollständig 😉

Richtig. Das sorgt vollständig für Klarheit. Danke!

gruss, heinetz

[Gunnar Bittersmann]

@@heinetz

auf meiner Seite unter der URL http://example.dev

Netter Versuch, aber das ist keine vorgesehene Beispieldomain. [BCP 32]

dev.example wäre eine.

LLAP 🖖

[heinetz]

@@heinetz

auf meiner Seite unter der URL http://example.dev

Netter Versuch, aber das ist keine vorgesehene Beispieldomain. [BCP 32]

dev.example wäre eine.

dabei habe ich das nichtmal versucht. Vielleicht denke ich beim nächsten Mal daran 😉