HTML-Fragmente mit JavaScript einbinden / wechselndes aria-current="page"

[Bernd Meier]

Ich habe mehrere HTML-Seiten, die das gleiche Navigationsmenü
erhalten sollen.

Es soll dabei die gerade aktuelle Seite mit aria-current="page"
hervorgehoben werden. Ich versuche ein Lösung zu finden,
die Punkte des Navigationsmeüns in eine externe Datei auszulagern,
so dass ich es nur in der externen Datei ändern muss,
falls es sich ändern sollte.

Mein Navigationsmenü in der index.html:
<nav>
<ul>
<li><a aria-current="page">Home</a></li>
<li><a href="punkt1.html">Punkt1</a></li>
<li><a href="punkt2.html">Punkt2</a></li>
</ul>
</nav>

Mein Navigationsmenü in der punkt1.html:
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a aria-current="page">Punkt1</a></li>
<li><a href="punkt2.html">Punkt2</a></li>
</ul>
</nav>

Mein Navigationsmenü in der punkt2.html:
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="punkt1.html>Punkt1</a></li>
<li><a aria-current="page">Punkt2</a></li>
</ul>
</nav>

Unter

https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file

habe ich gelesen, dass man per JavaScript HTML-Fragmente einlesen kann
(dortiges Beispiel mit a.html und b.js).

Mein Beispiel würde dann so aussehen:

<nav>
<ul>
<script src="b.js"></script>
</ul>
</nav>


Datei b.js:
<li><a aria-current="page">Home</a></li>
<li><a href="punkt1.html">Punkt1</a></li>
<li><a href="punkt2.html">Punkt2</a></li>

Das Problem ist nun das aria-current. Denn das ändert sich ja in
jeder Datei (index.html, punkt1.html, punkt2.html), so dass
obiger Inhalt der b.js nur für die index.html richtig wäre.

Gibt es trotzdem eine Lösung, den ausgelagerten Code
wiederverwendbar zu machen? Man müsste wohl das irgendwie
mit weiterem JavaScript-Code regeln können, der das
aria-current="page" einsetzt je nach Namen der Datei,
von der b.js aufgerufen wurde.

Als in etwa so:

Datei b.js:

Durch welche Datei wurde ich aufgerufen?

-> Ersetze im folgenden Code das href-Tag dort durch
aria-current="page", wo es dem Namen der aufrufenden
Datei zugewiesen wurde.

<li><a href="index.html>Home</a></li>
<li><a href="punkt1.html">Punkt1</a></li>
<li><a href="punkt2.html">Punkt2</a></li>

Weiß jemand, wie man das erreichen kann?

[Bernd Meier]

Korrektur

Leider habe ich vergessen, meinen JavaScript-Code mit
document.write zu umrahmen.

Meine b.js müsste als in etwa so aussehen:

document.write('\
\

<li><a aria-current="page">Home</a></li>\
<li><a href="punkt1.html">Punkt1</a></li>\

<li><a href="punkt2.html">Punkt2</a></li>\
\
');

[Thomas 'PointedEars' Lahn]

Stefan Ram wrote:
> Hier mal ein Beispiel für einen Seitengenerator (Node.js):
>
> main.js
>
> "use strict";
>
> { const attributes =( page, link )=>
> page == link ? 'aria-current="page"':
> link == 0 ? 'href="index.html"': 'href="punkt' + link + '.html';

Einige Leute haben die seltene Gabe, unles- und unwartbaren Code
auch noch in der elegantesten Programmiersprache schreiben zu können.

--
PointedEars

Twitter: @PointedEars2
Please do not cc me. / Bitte keine Kopien per E-Mail.

[Thomas 'PointedEars' Lahn]

Bernd Meier wrote:
> Am 14.02.2019 um 18:44 schrieb Bernd Meier:
>> Durch welche Datei wurde ich aufgerufen?

Das Konzept der Datei ist vom Konzept des Webdokuments gedanklich zu
trennen. Ein Webdokument kann genau so als Datei in einem Dateisystem
existieren; es kann aber auch erst bei Anforderung vom Server generiert werden.

>> -> Ersetze im folgenden Code das href-Tag

Das ist *kein* Tag, sondern ein _Attribut_:

<https://developer.mozilla.org/de/docs/Learn/HTML/Einf%C3%BChrung_in_HTML/Lerne_HTML_kennen>

>> dort durch aria-current="page", wo es dem Namen der aufrufenden
>> Datei zugewiesen wurde.

Es wird *keine* Datei aufgerufen, sondern ein Webdokument vom Webserver
*abgerufen* (request) und von der Layout-Engine *dargestellt* (render, display).

<https://www.html5rocks.com/de/tutorials/internals/howbrowserswork/>

(dabei ist zu beachten, dass dieser Artikel jetzt schon 8 Jahre alt ist)

>> <li><a href="index.html>Home</a></li>
>> <li><a href="punkt1.html">Punkt1</a></li>
>> <li><a href="punkt2.html">Punkt2</a></li>
>>
>> Weiß jemand, wie man das erreichen kann?
>
> Korrektur
>
> Leider habe ich vergessen, meinen JavaScript-Code mit
> document.write zu umrahmen.

Nein, Du hast nichts vergessen, denn dieser Ansatz ist (hier) falsch.

> Meine b.js müsste als in etwa so aussehen:
>
> document.write('\
> \
> <li><a aria-current="page">Home</a></li>\
> <li><a href="punkt1.html">Punkt1</a></li>\
> <li><a href="punkt2.html">Punkt2</a></li>\
> \
> ');

Das ist fehlerträchtiger Unsinn. Wie navigieren Benutzer ohne
clientseitiges Scripting? Was soll eine Suchmaschine (die nicht Scripting
unterstützen muss) hier indizieren?

Ein sinnvoller Ansatz wäre:

<ul>
<li><a id="link-home" href="/">Home</a></li>
<li><a id="link-punkt1" href="punkt1.html">Punkt1</a></li>
<li><a id="link-punkt2" href="punkt2.html">Punkt2</a></li>
</ul>
<script type="text/javacript">
(function () {
document.addEventListener('DOMContentLoaded', function () {
var filename = (window.location.pathname.match(
/\/([^/.]+)[^/]*$/) || [, ""])[1];

/* Absichtlich kein Test hier, damit Fehler im Dokument auffallen */
document.getElementById('link-' + (filename || 'home'))
.setAttribute('aria-current', 'page');
}, false);
}());
</script>

Im allgemeinen wird dieses Problem aber serverseitig von einem
Content-Management-System (CMS) gelöst, d.h. es wird das Markup serverseitig
passend generiert. Bis auf wenige Ausnahmen ist selbst im Anfängerbereich
die Zeit statisch generierter, händisch bearbeiteter HTML-Dokumente lange
vorbei.

[Arno Welzel]

Bernd Meier:

[...]

> Mein Navigationsmenü in der index.html:
> <nav>
> <ul>
> <li><a aria-current="page">Home</a></li>
> <li><a href="punkt1.html">Punkt1</a></li>
> <li><a href="punkt2.html">Punkt2</a></li>
> </ul>
> </nav>

[...]

> Gibt es trotzdem eine Lösung, den ausgelagerten Code
> wiederverwendbar zu machen? Man müsste wohl das irgendwie
> mit weiterem JavaScript-Code regeln können, der das
> aria-current="page" einsetzt je nach Namen der Datei,
> von der b.js aufgerufen wurde.

Korrekt. Du musst ein Script bauen, dass das Element mit dem Attribut
aria-current erweitert, dass auf die aktuelle URL verweist.

Das Stichwort dazu ist "DOM". Das Script schreiben musst Du aber selber.



--
Arno Welzel
https://arnowelzel.de

[Bernd Meier]

Vielen Dank für die Hilfen.