Ich habe 2 HTML-Dateien, nehmen wir an a.html y b.html . Unter a.html Ich möchte Folgendes aufnehmen b.html .
In JSF kann ich das auch so machen:
<ui:include src="b.xhtml" />Das bedeutet, dass im Inneren a.xhtml Datei, kann ich Folgendes einfügen b.xhtml .
Wie können wir das tun in *.html Datei?
In w3.js funktioniert include folgendermaßen:
<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>Eine genaue Beschreibung finden Sie hier: https://www.w3schools.com/howto/howto_html_include.asp
Wenn Sie Zugriff auf die .htaccess-Datei auf Ihrem Server haben, können Sie alternativ eine einfache Direktive hinzufügen, die es erlaubt, dass php auf Dateien mit der Endung .html interpretiert wird.
RemoveHandler .html
AddType application/x-httpd-php .php .htmlJetzt können Sie ein einfaches PHP-Skript verwenden, um andere Dateien wie z. B.:
<?php include('b.html'); ?>
Das ist es, was mir geholfen hat. Für das Hinzufügen eines Blocks von html-Code aus b.html à a.html sollte dies in die head Tag von a.html :
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>Dann wird im Body-Tag ein Container mit einer eindeutigen ID und einem Javascript-Block zum Laden der b.html wie folgt in den Behälter:
<div id="b-placeholder">
</div>
<script>
$(function(){
$("#b-placeholder").load("b.html");
});
</script>
Ich weiß, dass dies ein sehr alter Beitrag ist, so dass einige Methoden damals noch nicht verfügbar waren. Aber hier ist meine sehr einfache Sichtweise darauf (basierend auf Lolos Antwort).
Sie basiert auf den HTML5 data-*-Attributen und ist daher sehr generisch, da sie die for-each-Funktion von jQuery verwendet, um jede .class zu erhalten, die mit "load-html" übereinstimmt, und ihr jeweiliges data-source-Attribut zum Laden des Inhalts verwendet:
<div class="container-fluid">
<div class="load-html" id="NavigationMenu" data-source="header.html"></div>
<div class="load-html" id="MainBody" data-source="body.html"></div>
<div class="load-html" id="Footer" data-source="footer.html"></div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
$(".load-html").each(function () {
$(this).load(this.dataset.source);
});
});
</script>
Sie können ein Polyfill von HTML-Importen verwenden ( https://www.html5rocks.com/en/tutorials/webcomponents/imports/ ), oder diese vereinfachte Lösung https://github.com/dsheiko/html-import
Auf der Seite importieren Sie zum Beispiel einen HTML-Block wie diesen:
<link rel="html-import" href="./some-path/block.html" >Der Block kann eigene Einfuhren haben:
<link rel="html-import" href="./some-other-path/other-block.html" >Der Importer ersetzt die Direktive durch das geladene HTML, ähnlich wie SSI
Diese Direktiven werden automatisch angezeigt, sobald Sie dieses kleine JavaScript laden:
<script async src="./src/html-import.js"></script>Die Importe werden automatisch verarbeitet, sobald das DOM fertig ist. Außerdem stellt es eine API zur Verfügung, die Sie zur manuellen Ausführung, zum Abrufen von Protokollen und so weiter verwenden können. Viel Spaß :)
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
