W3.JS HTML enthält

Fügen Sie eine HTML-Datei ein:

w3.includeHTML()

Der HTML-Code

Speichern Sie den einzufügenden HTML-Code in einer HTML-Datei:

Inhalt.html

<a href="https://www.w3schools.com/html/">HTML</a><br>
<a href="https://www.w3schools.com/css/">CSS</a><br>
<a href="https://www.w3schools.com/bootstrap/">Bootstrap</a><br>
<a href="https://www.w3schools.com/js/">JavaScript</a><br>
<a href="https://www.w3schools.com/sql/">SQL</a><br>
<a href="https://www.w3schools.com/php/">PHP</a><br>
<a href="https://www.w3schools.com/w3css/">W3.CSS</a><br>

Fügen Sie den HTML-Code hinzu

Das Einbinden von HTML erfolgt über ein w3-include-html- Attribut:

Beispiel

<div w3-include-html="content.html"></div>

Fügen Sie das JavaScript hinzu

HTML-Includes werden von JavaScript ausgeführt.

Stellen Sie sicher, dass auf Ihrer Seite w3.js geladen ist, und rufen Sie w3.includeHTML() auf :

Beispiel

<script>
w3.includeHTML();
</script>

Vollständiges Beispiel

Beispiel

<!DOCTYPE html>
<html>
<script src="/lib/w3.js"></script>
<body>

<div w3-include-html="content.html"></div>

<script>
w3.includeHTML();
</script>

</body>
</html>

Fügen Sie viele HTML-Snippets hinzu

Sie können beliebig viele HTML-Snippets einfügen:

Beispiel

<!DOCTYPE html>
<html>
<script src="/lib/w3.js"></script>
<body>

<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>

<script>
w3.includeHTML();
</script>

</body>
<html>


Hinzufügen einer Callback-Funktion

Wenn Sie HTML-Snippets in eine Webseite einfügen, müssen Sie sicherstellen, dass andere Funktionen, die vom eingeschlossenen HTML abhängen, nicht ausgeführt werden, bevor das HTML ordnungsgemäß eingeschlossen ist.

Der einfachste Weg, Code „zurückzuhalten“, besteht darin, ihn in eine Callback-Funktion zu platzieren.

Eine Callback-Funktion kann als Argument zu w3.includeHTML() hinzugefügt werden:

Beispiel

<script>
w3.includeHTML(myCallback);

function myCallback() {
  // code that has to wait goes here
}
</script>

Ein Callback-Beispiel finden Sie im nächsten Kapitel dieses Tutorials.