Externe HTML-Dateien einbinden

Dabei seit
Dez. 2008
Beiträge
1.032
#1
Guten Nachmittag,

ich habe gestern für einen Freund eine kleine Bootstrap-Internetseite gemacht.
Ich muss zugeben, dass ich vorher nie mit irgendeiner Webtechnologie gearbeitet habe und ich daher kaum Erfahrungen mitbringe.

Deshalb hat mich eine Sache besonders gestört:
Das gesamte Layout (Header-Bild, Navigationbar untere Leiste für das Impressum, etc.) muss auf jeder Unterseite in der .html-Datei enthalten sein.
Ändere ich nun die Anordnung der Navigationsitems, muss ich diese Änderung in mehreren .html-Dateien anpassen.

Das ist uncool. Gibt es eine Möglichkeit die entsprechenden Elemente dynamisch aus mehreren anderen .html-Dateien zu laden, so das Änderungen nur an einer Stelle gemacht werden müssen.

Viele Grüße
T
 

Tockra

Lt. Commander
Ersteller dieses Themas
Dabei seit
Dez. 2008
Beiträge
1.032
#3
Dabei seit
Dez. 2017
Beiträge
224
#6
Wenn du das ganze nicht schon am Server machen willst musst du es natürlich am Client machen :p
Das "Problem" mit der Datenverbindung wirst du immer haben, du lädst ja erst die "Hauptseite" und holst dir danach den Header & Co wenn die Hauptseite da ist.

Bitte keine iFrames benutzen und bitte auch nicht jQuery laden wenn du es bisher noch nicht tust. Ist einfach unnötig solch ein großes Script für nur eine kleine Funktion zu laden. Nimm lieber sowas:

deine Hauptdatei (zum einfügen von einem <header>):
HTML:
<body>
    <script src="header.js"></script>
    <main></main>
    <script src="footer.js"></script>
</body>
Und dann in header.js
JavaScript:
document.write(`
<nav>
    <img alt='Logo'> Toller Header
</nav>
`);
Je nach deinen Apache-Einstellungen würden die Dateien auch noch lokal gecached werden (soll heißen wird nicht bei jedem Seitenaufruf nicht eine neue "header.js" geladen). Einziger Nachteil ist dass die ``-Schreibweise nicht in IE10(11?) funktioniert, müsstest dann evtl. das ganze HTML in den JS-Dateien escapen.

Deutlich eleganter bleibt immer noch PHP und dann einfach:
PHP:
<body>
    <?php include 'header.html'; ?>
    <main></main>
    <?php include 'footer.html'; ?>
</body>
 
Top