JavaScript liest bei href="{{env::request|urlattr}}#main"-Link header-Höhe nicht aus

[gbecker]

Hallo zusammnen,

ich möchte einen "Direkt Zum Hauptinhalt"-Ankerlink als Ersatz für einen "Skip Navigation"-Link setzen.
Dabei kommt JavaScript zum Einsatz, weil ich einen fixed header habe. Der header hat eine variable Höhe, die zur Laufzeit ausgelesen wird.
So ist sichergestellt, dass das Linkziel nicht hinter dem header verschwindet.

Wenn ich eine Seite zum Beispiel mit href="{{link_url::24|urlattr}}#main" aufrufe, funktioniert das Auslesen der header-Höhe wunderbar.
Wenn ich hingegen eine Seite mit href="{{env::request|urlattr}}#main" öffne, funktioniert das Auslesen der header-Höhe nicht.

Der "Direkt zum Hauptinhalt"-Ankerlink soll als Modul auf jeder Seite eingebunden werden, deshalb der Aufruf mit der Variablen.

Hat jemand Erfahrung, wie auch bei Seiten, die mittels Variablen aufgerufen werden, die header-Höhe korrekt ausgelesen werden kann?

[gbecker]

Unter https://craftcms.stackexchange.com/q...ile-in-craft-3 habe ich gelesen, dass Variablen von PHP an JavaScript übergeben werden müssen, damit JavaScript darauf zugreifen kann:

{% set env = getenv('ENVIRONMENT') %}
<script>
    var myVariable = '{{ env|e('js') }}'
</script>

Dieser Code soll ins Twig-Template eingebaut werden. Welches Twig-Template soll das sein?

JavaScript könnte dann mittels

document.addEventListener('DOMContentLoaded', () => {
    const myVar = window.myVariable;
});

auf die Variable zugreifen.

[gbecker]

Der Ankerlink, der jeweils im HTML-Code ausgegeben wird, weist einen kleinen aber wichtigen Unterschied auf:
Vor dem mit href="{{link_url::24|urlattr}}#main" ausgegebenen Ankerlink steht ein /
Vor dem mit href="{{env::request|urlattr}}#main" ausgegebenen Ankerlink steht KEIN /

Wenn vor dem Ankerlink KEIN / steht, kann JavaScript die header-Höhe nicht auslesen, aber der Ankerlink funktioniert.
Wenn vor dem Ankerlink ein / steht, kann JavaScript die header-Höhe auslesen, aber der Ankerlink funktioniert nicht mehr.

Gibt es für dieses Problem eine Lösung?

[lbableck]

Ich glaube ohne einen Link zur Seite kann man da nicht wirklich was zu sagen.
Ein Link hat eigentlich ja nichts mit dem Auslesen der Höhe eines Elements in JS zu tun, das Problem wird vermutlich woanders liegen.

[gbecker]

Das Ganze befindet sich auf einer lokalen Entwicklungsumgebung.

Das JavaScript enthält ein console.log, das die header-Höhe ausgibt.
Wenn der führende / in der URL fehlt, wird kein console.log ausgegeben, wenn der führende / in der URL vorhanden ist, wird die header-Höhe "Header Height: 84" ausgegeben.

Den führenden / habe ich folgendermaßen erzeugt: href="/{{env::request|urlattr}}#main"

Mit diesem "Hack" funktioniert das JavaScript. Der Ankerlink funktioniert mit diesem "Hack" natürlich nicht mehr.

[gbecker]

Es ist tatsächlich so, dass die unterschiedliche Ausgabe der Links - via ID versus via Variable bzw. mit / versus ohne / - einen Unterschied macht, wie diese von JavaScript verarbeitet werden.
Bei Links via ID kann ich getBoundingClientRect() verwenden und kann auf window.location.hash verzichten.
Bei Links via Vaiable muss ich den / zunächst ergänzen, bevor JavaScript weitere Operationen mit dem Link durchführen kann. Des Weiteren muss ich window.location.hash verwenden. Es stellt sicher, dass der Fokus auf das Linkziel gesetzt wird. Wegen window.location.hash liefert getBoundingClientRect() nicht die richtigen Werte. Stattdessen kann ich zum Beispiel die Eigenschaft offsetTop nutzen.