Hallo Felix,
das ist alles nicht so einfach. Wenn Du auf einer Seite bleibst und den Hash änderst (durch Tippen oder durch einen Hash-Link), dann bekommst Du popstate-Events. Aber der Browser ändert das DOM nicht.
Einfach nur pushState aufrufen tut auch nichts. Du kannst damit eine neue URL in die History legen, aber weiter passiert nichts.
Wenn Du hingegen einen Link auf #frickl:Super01.html
anklickst (oder dies an location zuweist), dann wird die Adresse auf den History-Stack gelegt UND du bekommst ein popstate-Event.
Wenn Du auf /wiki/TolleBeispiele#frickl:Super01.html bist, von dort zu forum.selfhtml.org wechselst und dann mit dem BACK Button zurückkehrst, bekommst Du ebenfalls ein popstate-Event.
Einziger Wermutstropfen: Wenn du im Forum bist und dort einem Link auf /wiki/TolleBeispiele#frickl:Super01.html folgst, dann bekommst Du kein popstate-Event. Eine Frickl-URL als Lesezeichen muss man anders behandeln.
Die Aufgabe "Frickl initialisieren" lagert man deshalb am besten in eine Funktion aus. Die prüft, ob ein #frickl-Hash da ist. Wenn nein, endet sie gleich wieder. Wenn ja, baut sie das Frickl auf.
Diese Funktion rufst Du auf
- im popstate Event
- EVENTUELL nach dem pushState-Funktionsaufruf - ich meine aber, das ist unnötig, ein Link tut's genauso
- beim Laden der Seite mit einem #frickl Hash.
Für den Fall, dass Du von einer #frickl-URL auf die "Normalversion" der Seite zurückwillst, musst Du die Seite neu laden. Es dürfte unmöglich sein, einen Snapshot der Seite zu machen, während Du das Frickl anzeigst. Hier gibt es übrigens einen wichtigen Unterschied: Wechselst Du von /foo#frickl nach /foo#, gibt es ein popstate Event. Wechselst Du aber von /foo#frickl nach /foo, gibt's das nicht, statt dessen lädt der Browser die Seite neu!
Die bessere Alternative könnte sein, Frickl als modalen Fullscreen-Dialog über den Artikel zu legen. Wenn ein popstate kommt, kein #frickl im Hash steht und der Dialog geöffnet ist, machst Du ihn einfach zu.
Dieser Link öffnet sofort die Frickl-Ansicht
Jedoch lande ich mit dem Zurück-Button, der sich ja wie history.back() verhält, auf der vorherigen Seite, anstatt auf der, welche mein JavaScript umgestaltet hat.
Das kann ich nicht nachvollziehen, vielleicht müssen wir dafür mal eine Discord-Session machen.
Rolf
sumpsi - posui - obstruxi