So rufen Sie einen HTML-Code auf mehreren HTML-Seiten gemeinsam auf
|
Methode 1: Skriptmethode verwenden: Erstellen Sie eine gemeinsame Header-Datei head.js oder eine gemeinsame Footer-Datei foot.js. Wenn die Homepage-Datei mac.htm ist, lautet die Methode zum Aufrufen der Kopf- oder Fußzeilendatei: Fügen Sie am Anfang und Ende des Homepage-Dateicodes jeweils den folgenden Code hinzu: <script src='head.js'> und <script src='foot.js'>, um die gemeinsame Kopf- oder Fußzeile der Webseite aufzurufen. Dies reduziert die Komplexität des Schreibens der Kopf- oder Fußzeile für jede Seite und ist bequem zu ändern. Sobald eine Kopf- oder Fußzeilendatei geändert wird, ändert sich die Kopf- oder Fußzeile aller Seiten entsprechend, was die Arbeitseffizienz erhöht. Der HTML-Implementierungscode der Navigationsleiste lautet wie folgt:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge,chrome=1">
<title>Beispiele</title>
<meta name="Beschreibung" Inhalt="">
<meta name="Schlüsselwörter" content="">
<link rel="stylesheet" type="text/css" href="../css/head.css">
</Kopf>
<Text>
<div Klasse='miaov_head'>
<ul>
<li><a href="http://www.cnblogs.com/jtjds/">Mac</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">iPad</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">iPhone</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">Beobachten</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">Musik</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">Kontaktieren Sie uns</a></li>
</ul>
</div>
</body>
</html>Die CSS-Datei ist head.css:
* {
Rand: 0;
Polsterung: 0;
}
Körper {
Hintergrund: weiß;
Position: relativ;
Höhe: 100%;
Farbe: #777;
Schriftgröße: 13px;
}
li {
Listenstil: keiner;
Textdekoration: keine;
}
.miaov_head {
Höhe: 36px;
Breite: 100 %;
Rand: 0 automatisch;
Hintergrund: schwarz;
Rand unten: 0px;
}
.miaov_head ul {
schweben: links;
Breite: 900px;
Höhe: 36px;
Rand oben: 0px;
Farbe: weiß;
Position: absolut;
oben: 0px;
Rand links: 250px;
}
.miaov_head ul li {
schweben: links;
Polsterung links: 80px;
Rand links: 0px;
Farbe: weiß;
Listenstil: keiner;
}
.miaov_head ul li a {
Farbe: weiß;
Schriftgröße: 14px;
Textdekoration: keine;
}
.miaov_head Eingabe {
Position: absolut;
oben: 5px;
Rand links: 1000px;
Breite: 200px;
Höhe: 22px;
}
.miaov_head ein {
Zeilenhöhe: 36px;
Farbe: #777;
}
.miaov_head a:hover {
Farbe: #555;
}
Konvertieren Sie den obigen HTML-Code in JavaScript:
document.writeln("<!DOCTYPE html>");
document.writeln("<html>");
document.writeln("<Kopf>");
document.writeln("<meta charset=\"utf-8\">");
document.writeln("<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">");
document.writeln("<title>Beispiele</title>");
document.writeln("<meta name='description' content=\"\">");
document.writeln("<meta name='keywords' content=\"\">");
document.writeln("<link rel=\"stylesheet\" type=\"text/css\" href=\"../css/head.css\">");
document.writeln("</head>");
document.writeln("<body>");
document.writeln(" <div class=\'miaov_head\'>");
document.writeln(" <ul>");
document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">Mac</a></li>");
document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">iPad</a></li>");
document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">iPhone</a></li>");
document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">Beobachten</a></li>");
document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">Musik</a></li>");
document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">Kontaktieren Sie uns</a></li>");
document.writeln(" </ul>");
document.writeln("</div>");
document.writeln(" ");
document.writeln("</body>");
document.writeln("</html>");
document.writeln("");Und speichern Sie es in head.js. Nach dem Speichern können Sie bei Bedarf die js-Datei im Kopf aufrufen, z. B. head.js in mac.html:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge,chrome=1">
<title>Beispiele</title>
<meta name="Beschreibung" Inhalt="">
<meta name="Schlüsselwörter" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="../javascript/head.js"></script>
</Kopf>
<Text>
<ul>
<li><a href="http://www.cnblogs.com/jtjds/">Mac</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">iPad</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">iPhone</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">Beobachten</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">Musik</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">Kontaktieren Sie uns</a></li>
</ul>
</body>
</html>Im Browser anzeigen:
Methode 2: Verwenden Sie $("selector").load() Um eine Code-Duplikation auf mehreren Seiten zu vermeiden, können Sie die Methode load() verwenden, um wiederholte Teile (wie etwa Navigationsleisten) in separate Dateien zu verschieben.
//1. Verwenden Sie diese Struktur dort, wo Sie sie in der aktuellen Datei einfügen möchten:
<div Klasse="include" Datei="***.html"></div>
//2. Fügen Sie den Inhalt in ***.html ein und verwenden Sie nur das HTML-Format, da es dem Editor Schreibhilfe bietet. .
//3. Code:
$(".include").jedes(Funktion() {
wenn (!!$(this).attr("Datei")) {
var $includeObj = $(dies);
$(this).load($(this).attr("Datei"), Funktion(html) {
$includeObj.after(html).remove(); //Schreibe den geladenen Dateiinhalt an das Ende des aktuellen Tags und entferne das aktuelle Tag})
}
});
Oder schreiben Sie einfach die wiederholten Teile in die Indexdatei, legen Sie den Rest in separate Dateien ab und laden Sie sie in ~ Im Vergleich zur ersten Methode empfehle ich persönlich die zweite Methode mehr. Referenz: jQuery - AJAX load() Methode Dies ist das Ende dieses Artikels zum gemeinsamen Aufrufen eines HTML-Codeabschnitts auf mehreren HTML-Seiten. Weitere relevante Inhalte zum gemeinsamen Aufrufen eines HTML-Codeabschnitts auf mehreren HTML-Seiten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Wir hoffen, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: So aktivieren Sie die MySQL-Remoteverbindung
>>: Docker verpackt das lokale Image und stellt es auf anderen Maschinen wieder her
Artikel empfehlen
Detaillierte Erklärung des Unterschieds und der Anwendung von CSS3-Filtern: Schlagschattenfilter und Box-Shadow
Um mit Standard-CSS3 den Schatteneffekt eines Ele...
js implementiert das Hinzufügen und Entfernen von Warenkörben sowie die Preisberechnung
In diesem Artikelbeispiel wird der spezifische JS...
WeChat-Applet zum Abrufen eines Schrittdatensatzes für Mobiltelefonnummern
Vorwort Kürzlich bin ich bei der Entwicklung eine...
Ein auf Vue-cli basierender Codesatz unterstützt mehrere Projekte
Inhaltsverzeichnis Anwendungsszenario Ideen Proje...
Analyse der MySql CURRENT_TIMESTAMP-Funktion anhand eines Beispiels
Beim Erstellen eines Zeitfelds STANDARD CURRENT_T...
Tutorial zum Erstellen eines FTP-Servers in Ubuntu 16.04
Ubuntu 16.04 baut FTP-Server FTP installieren FTP...
Warum erscheinen ausgewählte @@session.tx_read_only in großen Mengen in der Datenbank?
Finden Sie das Problem Beim Abrufen der wichtigst...
Detaillierte Erklärung zum Erstellen mehrerer Instanzen von MySQL 5.6 in einer CentOS7-Umgebung
Dieser Artikel beschreibt, wie mehrere Instanzen ...
So setzen Sie das Zabbix-Passwort zurück (ein Schritt)
Problembeschreibung Da wir uns nicht lange bei Za...
Detaillierte Erklärung des Unterschieds und der Verwendung von Anführungszeichen und Backticks in MySQL
Vorwort Also habe ich diesen Blog geschrieben. Di...
Detaillierte Erklärung des Java-Aufrufs von ffmpeg zum Konvertieren des Videoformats in flv
Detaillierte Erklärung des Java-Aufrufs von ffmpe...
Mit JS einen rotierenden Weihnachtsbaum in HTML implementieren
<!DOCTYPE HEML PUBLIC> <html> <Kop...
Der neueste Linux-Installationsprozess von Tomcat8
Herunterladen https://tomcat.apache.org/download-...
Zusammenfassung des in JS implementierten Minesweeping-Projekts
Dieser Artikel enthält die Zusammenfassung des JS...
JavaScript-Datenübertragung zwischen verschiedenen Seiten (URL-Parametererfassung)
Auf Webseiten begegnen wir häufig dieser Situatio...