Externe HTML-Dateien einbinden

Tockra · 6. Dezember 2018

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

Andreas_ · 6. Dezember 2018

Ist PHP verfügbar? Da gibt es include/require.

Tockra · 6. Dezember 2018

Ich würde gerne die Verwendung von PHP vermeiden.

Ich habe z.B. folgende Java-Script Alternative gefunden, finde das aber etwas doof, dass das Zusammenfügen beim Client passiert (scheint zumindest so): https://stackoverflow.com/questions/38837835/include-html-in-another-html-file

Ich habe da etwas Angst, dass böse Dinge bei einer langsamen Datenverbindung passieren.

Defender1st · 6. Dezember 2018

Mit reinem HTML Schwierig.

Du könntest Frames verwenden (https://wiki.selfhtml.org/wiki/HTML/Frames)

(Bitte nicht!)

Btw. Wenn du auf PHP verzichten willst wird alles beim Client zusammengefügt...

Tockra · 6. Dezember 2018

Im Endeffekt setzt dann aber auch wieder der Client das Zeug zusammen ?!
Wo wäre dann der Unterschied zur JavaScript variante?

Joshinator · 6. Dezember 2018

Wenn du das ganze nicht schon am Server machen willst musst du es natürlich am Client machen

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>

Suche

Externe HTML-Dateien einbinden

Tockra

Lt. Commander

Andreas_

Commander

Tockra

Lt. Commander

Defender1st

Lt. Junior Grade

Tockra

Lt. Commander

Joshinator

Commander

Ähnliche Themen