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?
Meiner Meinung nach ist die beste Lösung die Verwendung von jQuery:
a.html :
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>b.html :
<p>This is my include file</p>Diese Methode ist eine einfache und saubere Lösung für mein Problem.
Das jQuery .load() Dokumentation ist aquí .
Erweitern Sie Lolos Antwort Wenn Sie viele Dateien einbinden müssen, können Sie den Vorgang ein wenig mehr automatisieren. Verwenden Sie diesen JS-Code:
$(function () {
var includes = $('[data-include]')
$.each(includes, function () {
var file = 'views/' + $(this).data('include') + '.html'
$(this).load(file)
})
})Und dann etwas in die html-Datei einfügen:
<div data-include="header"></div>
<div data-include="footer"></div>Dies würde die Datei views/header.html y views/footer.html .
Meine Lösung ist ähnlich wie die von lolo oben. Allerdings füge ich den HTML-Code über die JavaScript-Funktion document.write ein, anstatt jQuery zu verwenden:
a.html:
<html>
<body>
<h1>Put your HTML content before insertion of b.js.</h1>
...
<script src="b.js"></script>
...
<p>And whatever content you want afterwards.</p>
</body>
</html>b.js:
document.write('\
\
<h1>Add your HTML code here</h1>\
\
<p>Notice however, that you have to escape LF's with a '\', just like\
demonstrated in this code listing.\
</p>\
\
');Der Grund für mich gegen die Verwendung von jQuery ist, dass jQuery.js ~90kb groß ist, und ich möchte die Menge der zu ladenden Daten so klein wie möglich halten.
Um die korrekt escapte JavaScript-Datei ohne viel Arbeit zu erhalten, können Sie den folgenden sed-Befehl verwenden:
sed 's/\\/\\\\/g;s/^.*$/&\\/g;s/'\''/\\'\''/g' b.html > escapedB.htmlOder verwenden Sie einfach das folgende praktische Bash-Skript, das als Gist auf Github veröffentlicht wurde und das alle notwendigen Arbeiten automatisiert, indem es b.html à b.js : https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6
Kredite an Greg Minshall für den verbesserten sed-Befehl, der auch umgekehrte Schrägstriche und einfache Anführungszeichen umgeht, was mein ursprünglicher sed-Befehl nicht berücksichtigt hat.
Alternativ können Sie bei Browsern, die Folgendes unterstützen Vorlagenliterale funktioniert auch das Folgende:
b.js:
document.write(`
<h1>Add your HTML code here</h1>
<p>Notice, you do not have to escape LF's with a '\',
like demonstrated in the above code listing.
</p>
`);
HTML5-Importe zur Kasse bitten über Html5rocks-Tutorial und bei polymer-project
Zum Beispiel:
<head>
<link rel="import" href="http://stackoverflow.com/path/to/imports/stuff.html">
</head>
Schamlose Werbung für eine Bibliothek, die ich zur Lösung dieses Problems geschrieben habe.
https://github.com/LexmarkWeb/csi.js
<div data-include="/path/to/include.html"></div>Das obige Beispiel nimmt den Inhalt von /path/to/include.html und ersetzen die div mit ihm.
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.
