Wenn ich auf einem Desktop auf einen Link mit einem Anker klicke, wird dorthin gescrollt. Auf Mobilgeräten (Android, FF & Chrome) wird der Anker jedoch aus der URL entfernt, sodass kein Scrollen zu dieser Stelle erfolgt.
Was ich erreichen möchte:
Wir haben ein langes Leitfaden- und FAQ-Dokument, das Verweise auf Überschriften enthalten muss. Da Discourse id-Parameter entfernt, habe ich eine einfache Theme-Komponente erstellt, die benutzerdefinierte Datenattribute im Zieldokument verwendet und auf Anker in der URL hört, um zum Element mit dem passenden Datenattribut zu scrollen.
Es funktioniert auf dem Desktop!
Auf Mobilgeräten werden die Anker jedoch scheinbar entfernt, sodass beim Aufruf der Zielseite nicht zum richtigen Element gescrollt wird. Und natürlich ist es bei langen Dokumenten genau auf Mobilgeräten, wo man diese Navigation am dringendsten benötigt.
Ich habe jedoch festgestellt, dass die von der Inhaltsverzeichnis-Komponente generierten Anker funktionieren, wenn sie in einem neuen Link geöffnet werden. Sie werden nicht aus der URL entfernt, und der Browser scrollt an die richtige Stelle.
Jemand hat vorgeschlagen, stattdessen Abfrageparameter zu verwenden. Diese werden auf Mobilgeräten scheinbar nicht entfernt. Aber erstaunlicherweise werden sie auf dem Desktop entfernt.
Ich benutze kein Android, also kann ich das nicht testen, aber ich habe Header-Links schon oft verwendet und sie funktionieren auf meinem iPhone einwandfrei. Ich frage mich, warum du ID-Anker verwendest, anstatt einfach zu dem gewünschten Header zu verlinken?
Siehst du das -13 am Ende? Es ist dort, weil es die dreizehnte Überschrift ist. Sobald du eine neue Überschrift weiter oben im Dokument einfügst, funktioniert der Link nicht mehr. Und natürlich funktioniert er auch nicht mehr, wenn du den Text der Überschrift änderst.
Wenn ich sage, dass er nicht mehr funktioniert, meine ich Änderungen im Zieldokument. Soweit ich das beurteilen kann, werden diese Anker dynamisch generiert, wenn die Seite geladen wird. Wenn du also das Inhaltsverzeichnis-Plugin (TOC) verwendest, ist das Ändern des Dokumentes kein Problem.
In unserem Anwendungsfall wird auf eine FAQ verlinkt. Daher ist es nicht unüblich, neue Fragen/Überschriften hinzuzufügen.
Aber du hast recht, dass Discourse das Muster dieser Anker zu erkennen scheint und sie durchlässt. Wenn das Muster jedoch nicht dem erwarteten entspricht, wird es entfernt.
Es sind einfach normale alphanumerische IDs. Wenn ich also versuchen würde, einen Anker für dein obiges Beispiel zu erstellen, würde ich einfach cloudflare-r2 verwenden.
In meinen Tests entfernt der Markdown-Cooker die name-Attribute. Dies ist die Ursache für mein erstes Problem.
Das Problem, das ich in diesem Thema anspreche, ist jedoch, dass selbst wenn ich diesen Anker zum Laufen bringen könnte, auf Mobilgeräten das #cloudflare-r2 entfernt wird. Auf dem Desktop passiert das nicht.
Ah, ich verstehe. Ja, es sieht so aus, als würde der Rich-Text-Editor diese entfernen, der Markdown-Editor jedoch nicht… Im Rich-Text-Editor müsste man es meiner Meinung nach in ein <div>-Element einbetten, damit das HTML erhalten bleibt.
Das habe ich bereits versucht. Es wird trotzdem herausgefiltert. Außerdem kann ich mich nicht darauf verlassen, dass jemand in der Zukunft den Markdown-Editor nicht verwendet.
Ich habe das oben genannte HTML in den Rich-Text-Editor eingefügt, um es zu testen. Mal sehen …