Wie kann ich Kopf- und Fußzeilendateien mithilfe von JavaScript auf mehreren HTML-Seiten wiederverwenden?

Einbinden gemeinsamer Kopf- und Fußzeilendateien auf mehreren HTML-Seiten

Können Kopf- und Fußzeilenteile einer Webseite in mehrere andere eingebunden werden Seiten separat?

Absolut! Durch die Nutzung von JavaScript können Sie mühelos gemeinsame Kopf- und Fußzeilendateien in mehrere HTML-Seiten einbinden.

So fügen Sie Kopf- und Fußzeilendateien mit HTML und JavaScript ein

1. Erstellen Sie eine JavaScript-Funktion: Rufen Sie in den HTML-Seiten, in die Sie allgemeine Kopf- und Fußzeileninhalte einfügen möchten, eine JavaScript-Funktion auf, um diese externen Inhalte zu laden Dateien. Beispiel:

<script>
function loadHeaderFooter() {
  $("#header").load("header.html");
  $("#footer").load("footer.html");
}
</script>

2. Platzieren Sie die Funktion „loadHeaderFooter“ in den HTML-Seiten: Stellen Sie sicher, dass der Funktionsaufruf „loadHeaderFooter“ innerhalb des platziert wird. Element der Seite.
3. Div-Elemente für Kopf- und Fußzeile hinzufügen: Erstellen und ändern Sie HTML-Elemente, die als Platzhalter für den extern geladenen Kopf- und Fußzeileninhalt dienen:

<div>
<ol start="4"><li>
<strong>Rufen Sie die Funktion „loadHeaderFooter“ beim Laden der Seite auf</strong>: Verwenden Sie jQuery, um Führen Sie die Funktion „loadHeaderFooter“ aus, wenn die Seite vollständig geladen ist:</li></ol>
<pre class="brush:php;toolbar:false"><script>
$(document).ready(loadHeaderFooter);
</script>

5. Erstellen Sie die Dateien „header.html“ und „footer.html“: Vorausgesetzt, diese Dateien befinden sich im selben Verzeichnis Als Ihre Haupt-HTML-Seite können Sie den gewünschten Kopf- und Fußzeileninhalt in diese separaten HTML-Seiten einbetten Dateien.

Beispiel:

header.html

<a href="http://www.example.com">Header Link</a>

footer.html

<p>Copyright 2023</p>

Vorteile der Verwendung externer Kopf- und Fußzeilen Dateien:

• Wiederverwendbarkeit von Code: Reduziert sich wiederholenden Code und verbessert die Wartbarkeit.
• Konsistentes Design: Sorgen Sie für einheitliche Kopf- und Fußzeilen Darstellung auf mehreren Seiten.
• Skalierbarkeit: Einfache Aktualisierung oder Änderung Kopf- und Fußzeileninhalte, ohne dass sich dies auf mehrere Seiten auswirkt.