JavaScript liest bei href="{{env::request|urlattr}}#main"-Link header-Höhe nicht aus
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?
Variablen von PHP an JavaScript übergeben
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:
Code:
{% 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
Code:
document.addEventListener('DOMContentLoaded', () => {
const myVar = window.myVariable;
});
auf die Variable zugreifen.
Kleiner Unterschied zwischen link_url::24- und env::request-Aufruf
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?
