HTML-Fragment in HTML-Seite einfügen

Situation

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 statischen 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ühren 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 Apache-Webserver.

Siocherheitseinstllungen für die Website

Wenn für die Website erhöhte Sicherheitseinstellungen eingerichtet sind, seien das nun Anweisungen im Head-Bereich jeder Datei und/oder auf dem Apache-Webserver, dann wird dies hier nicht ausgeführt.

Allgmein entscheidet man sich, die fraglichen Einstellungen entweder in der jeder HTML-Datei zu hinterlegen oder einmalig auf dem Webserver in der Datei .htaccess. Allein die die Einstellung gegen das Clickjacking muss auf dem Webserver vorgenommen werden.

Durchführung

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

Tragen Sie den Pfad zu dieser Datei in der verwendeten HTML-Datei in den Headbereich ein. Beispiel:

<script src="../scripts/w3data.js"></script>

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

Eine Namenskonvention und eine passende Ordnerstruktur sind auf jeden Fall vorteilhaft, um den Überblick zu behalten, zumal dann, wenn es ein komplexes System mit Dateien für mehrere Sprachen ist.

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 in einer Datei dabei im HTML-Fragment bearbeitet werden.

Bei Aufrufen der Seite dauert es einen kurzen Moment, bis die Seite vollständig geladen ist. Zuerst wird der adressierte Teil angezeigt. Dann wird das betreffende Fragment in die bereits geladenen Inhalt eingefügt.

Die Suchmaschine wird es nicht mögen, wenn die Seite nicht sogleich fertig ist und angezeigt werden kann und dann Teile eingeschoben werden wollen.

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