Einfügen einer HTML-Datei in eine andere HTML-Datei
-
Verwenden Sie die jQuery
load()-Methode, um eine HTML-Datei in eine HTML-Datei einzubinden - Verwenden Sie JavaScript, um eine HTML-Datei in eine HTML-Datei einzuschließen
In diesem Artikel werden Methoden zum Einschließen einer HTML-Datei in eine HTML-Datei vorgestellt.
Verwenden Sie die jQuery load()-Methode, um eine HTML-Datei in eine HTML-Datei einzubinden
Die jQuery-Methode load() ermöglicht es uns, die Daten vom Server zu laden. Die Daten werden im ausgewählten Container angezeigt. Mit der Methode load() können wir eine weitere HTML-Datei in die aktuelle HTML-Datei einbinden. Die Syntax der Methode load() ist wie folgt.
.load(url, data, callback);
Die Methode load() nimmt als ersten Parameter die zu ladende URL. Es hat zwei weitere Parameter, data und callback function, die optional sind. Der Parameter Daten sind die Daten, die während der Bearbeitung der Anfrage an den Server gesendet werden. Die Callback-Funktion wird ausgeführt, wenn die Methode load() abgeschlossen ist.
Um jQuery auszuführen, müssen wir das jQuery-CDN im script-Tag in HTML verwenden. Gehen Sie beispielsweise zu CDN und wählen Sie die minimierte Option in der neuesten Version von jQuery. Kopieren Sie anschließend den Code und fügen Sie ihn in die Datei index.html ein. Als nächstes erstellen Sie ein div mit der ID anotherContent in HTML. Erstellen Sie dann ein p-Tag und schreiben Sie den Text This is from index.html. Erstellen Sie eine weitere HTML-Datei namens lake.html und schreiben Sie einen Absatz This is from lake.html. Schreiben Sie in index.html eine jQuery-Funktion. Wählen Sie die ID anotherContent und rufen Sie die Methode load() mit lake.html als Parameter auf.
Wenn wir die Datei index.html ausführen, sehen wir auch den Text This is from lake.html. Wir sollten jedoch die Datei index.html von einem HTTP-Server ausführen. Cross-Origin Request wird blockiert, wenn wir eine andere Datei (in unserem Fall lake.html) in die aktuelle Datei über den lokalen file-Server einbinden. Um dieses Problem zu beheben, können wir mit dem folgenden Python-Befehl aus dem Verzeichnis der Datei index.html einen HTTP-Server erstellen.
python3 -m SimpleHTTPServer 1337
Dann können wir von http://localhost:1337 auf unsere Webseite zugreifen. Somit können wir jQuery verwenden, um eine andere HTML-Datei in die aktuelle HTML-Datei einzubinden.
Beispielcode:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<script>
$(function(){
$("#anotherContent").load("lake.html");
});
</script>
<div id="anotherContent"></div>
<p>This is from index.html</p>
<p> This is from lake.html</p>
Ausgabe:
This is from lake.html
This is from index.html
Verwenden Sie JavaScript, um eine HTML-Datei in eine HTML-Datei einzuschließen
Wir können JavaScript verwenden, um HTML in eine HTML-Datei einzubinden. Der Vorteil der Verwendung dieser Methode mit jQuery besteht darin, dass wir keine der jQuery-Dateien laden müssen, die die Größe unserer Datei verringern. Wir können die Vorlagenliterale in JavaScript verwenden, um den HTML-Code zu schreiben. Wir können unser Ziel erreichen, indem wir die JavaScript-Datei in unsere HTML-Datei aufnehmen und den HTML-Code in die JavaScript-Datei schreiben.
Verknüpfen Sie beispielsweise in der Datei index.hmtl die Datei lake.js mit dem Attribut src im Tag script. Schreiben Sie im Body-Bereich den Text This is from index.html. Verwenden Sie in der Datei lake.js document.write(), um den HTML-Code zu schreiben. Verwenden Sie die Vorlagenliterale, um den HTML-Code in die Methode zu schreiben. Mit anderen Worten, umhüllen Sie den HTML-Inhalt mit den Backticks. Schreiben Sie das p-Tag in die Methode und schreiben Sie den Text This is HTML from lake.js.
Im Ausgabeabschnitt sehen wir die Texte aus beiden Dateien. So können wir mit JavaScript HTML in eine HTML-Datei einbinden.
Beispielcode:
<head>
<script src="lake.js "></script>
</head>
<body>
<p>This is from index.html</p>
</body>
document.write(`
<p>This is HTML from lake.js</p>
`);
Ausgabe:
This is HTML from lake.js
This is from index.html
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn