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?
Es gibt verschiedene Arten von Antworten, aber ich habe nie das älteste Werkzeug gefunden, das hier verwendet wird:
"Und alle anderen Antworten haben bei mir nicht funktioniert."
<html>
<head>
<title>pagetitle</title>
</head>
<frameset rows="*" framespacing="0" border="0" frameborder="no" frameborder="0">
<frame name="includeName" src="yourfileinclude.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0">
</frameset>
</html>
Verwendung von ES6-Backticks ``: Vorlagenliterale !
let nick = "Castor", name = "Moon", nuts = 1
more.innerHTML = `
<h1>Hello ${nick} ${name}!</h1>
You collected ${nuts} nuts so far!
<hr>
Double it and get ${nuts + nuts} nuts!!
`
<div id="more"></div>Auf diese Weise können wir HTML ohne Anführungszeichen kodieren, Variablen aus dem DOM einbinden und so weiter.
Es ist ein leistungsfähiges Template-Engine, können wir separate js-Dateien und verwenden Sie Ereignisse, um den Inhalt an Ort und Stelle zu laden, oder sogar trennen alles in Brocken und rufen Sie bei Bedarf:
let inject = document.createElement('script');
inject.src= '//....com/template/panel45.js';
more.appendChild(inject);
Ich habe eine weitere Lösung für diese Aufgabe
Ajax in Javascript verwenden
Hier ist der erklärte Code in Github Repo https://github.com/dupinder/staticHTML-Include
Grundgedanke ist:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='main.js'></script>
</head>
<body>
<header></header>
<footer></footer>
</body>
</html>main.js
fetch("./header.html")
.then(response => {
return response.text()
})
.then(data => {
document.querySelector("header").innerHTML = data;
});
fetch("./footer.html")
.then(response => {
return response.text()
})
.then(data => {
document.querySelector("footer").innerHTML = data;
});
Mit HTML allein ist es nicht möglich, die HTML Datei in einer anderen HTML Datei. Aber hier ist eine sehr einfache Methode, dies zu tun. Verwendung dieser JS-Bibliothek können Sie das ganz einfach tun. Benutze einfach diesen Code:
<script> include('path/to/file.html', document.currentScript) </script>
Auf der Grundlage der Antwort von https://stackoverflow.com/a/31837264/4360308 Ich habe diese Funktionalität mit Nodejs (+ express + cheerio) wie folgt implementiert:
HTML (index.html)
<div class="include" data-include="componentX" data-method="append"></div>
<div class="include" data-include="componentX" data-method="replace"></div>JS
function includeComponents($) {
$('.include').each(function () {
var file = 'view/html/component/' + $(this).data('include') + '.html';
var dataComp = fs.readFileSync(file);
var htmlComp = dataComp.toString();
if ($(this).data('method') == "replace") {
$(this).replaceWith(htmlComp);
} else if ($(this).data('method') == "append") {
$(this).append(htmlComp);
}
})
}
function foo(){
fs.readFile('./view/html/index.html', function (err, data) {
if (err) throw err;
var html = data.toString();
var $ = cheerio.load(html);
includeComponents($);
...
}
}append -> fügt den Inhalt in das div ein
replace -> ersetzt das div
Sie könnten leicht weitere Verhaltensweisen nach demselben Muster hinzufügen
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.
