HTML-Fragment in HTML-Seite einfügen

Problem

Die HTML-Seiten einer Website mit statischen Inhalten enthalten jeweils die gleiche Kopf- und Fußzeile. In diesem Beispiel müssen die Kopf- und Fußzeile einer jeden HTML-Seite manuell bearbeitet, also in die betreffenden HTML-Seiten eingefügt werden.
Das erfordert - zumal bei einer Änderung - viel zusätzliche Zeit.

Ziel

Es soll erreicht werden, dass der Browser beim Aufrufen der statischenb HTML-Seiten die Kopf- und Fußzeile automatisch einfügt.

Beobachtung

Die hier angebotene Lösung funktioniert nicht mit jedem Browser direkt aus einem Ordner heraus - also ohne Webserver. Mit Microsoft Edge sah das deutlich besser aus. Dies als Anmerkung, falls Sie darüber nachdenken, Ihre Website zum Beispiel mal über einen USB-Stick zeigen zu wollen.

Firefox, Google Chrome führren bei einem Test die Dateien nicht lokal aus. Die HTML-Seite mit dem Inhalt wurde angezeigt, Kopf- und Fußzeile wurden jedoch nicht automatisch eingefügt.

Wenn Sie also auch das Menü auf diese Weise einbinden, ist dann Navigation nicht möglich.

Richtig gut klappt es mit einem lokal installierten Webserver.

Lösung

Laden Sie diese Datei von 'https://www.w3schools.com/w3js/w3js_downloads.asp' herunter:

w3data.js

Speichern Sie die Datei in Ihrer Website an einer geeigneten Stelle, zum Beispiel hier:

/scripts/w3data.js

Erstellen Sie ein HTML-Fragment, das später in der aufgerufenen HTML-Seite erscheinen soll und speichern Sie dieses Fragment zum Beispiel unter

/de/htmlfragment.html

Bearbeiten Sie die HMTL-Datei, in welcher das Fragment später beim Aufruf eingefügt werden soll wie gewohnt und fügen Sie an geeigneter Stelle diese Zeilen ein. Dabei wird vorausgesetzt, dass die HTML-Datei und das Fragment sich im selben Ordner befinden.

 <div w3-include-html="htmlfragment.html" /></div>
    <script>
      w3IncludeHTML();
    </script>

Dieses Verfahren kann für unterschiedliche HTML-Fragmente verwendet werden, für Kopf- und Fußzeile, auch für ein Menü. Das betreffende Menü müsste dann lediglich im HTML-Fragment bearbeitet werden.
Das geht schon ein wenig in die Richtung eines Content-Management-Systems.

Quellen:
https://www.w3schools.com/w3js/w3js_html_include.asp
https://www.w3schools.com/w3js/w3js_downloads.asp