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 mit Firefox auch direkt aus einem Ordner heraus - also ohne Webserver. Dies als Anmerkung, falls Sie darüber nachdenken, Ihre Website zum Beispiel mal über einen USB-Stick zeigen zu wollen.

Google Chrome führt die Dateien nicht lokal aus. Das hat möglicherweise mit Sicherheitseinstellungen zu tun.

Von einem Webserver aus aufgerufen funktioniert die hier angebotene Lösung auch mit Google Chrome.

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

Akzeptieren

Diese Website verwendet Cookies. Durch die Nutzung dieser Webseite erklären Sie sich damit einverstanden, dass Cookies gesetzt werden. Mehr erfahren