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?
Die meisten Lösungen funktionieren, aber sie haben Probleme mit jquery :
Das Problem ist folgender Code $(document).ready(function () { alert($("#includedContent").text()); } keine Warnungen ausgibt, anstatt auf eingeschlossene Inhalte hinzuweisen.
Ich schreibe den unten stehenden Code, in meiner Lösung können Sie auf den enthaltenen Inhalt in $(document).ready Funktion:
(Der Schlüssel ist das synchrone Laden der enthaltenen Inhalte).
index.htm :
<html>
<head>
<script src="jquery.js"></script>
<script>
(function ($) {
$.include = function (url) {
$.ajax({
url: url,
async: false,
success: function (result) {
document.write(result);
}
});
};
}(jQuery));
</script>
<script>
$(document).ready(function () {
alert($("#test").text());
});
</script>
</head>
<body>
<script>$.include("include.inc");</script>
</body>
</html>include.inc :
<div id="test">
There is no issue between this solution and jquery.
</div>
Ein anderer Ansatz mit Fetch API mit Promise
<html>
<body>
<div class="root" data-content="partial.html">
<script>
const root = document.querySelector('.root')
const link = root.dataset.content;
fetch(link)
.then(function (response) {
return response.text();
})
.then(function (html) {
root.innerHTML = html;
});
</script>
</body>
</html>
Hier ist mein Ansatz mit Fetch API und async-Funktion
<div class="js-component" data-name="header" data-ext="html"></div>
<div class="js-component" data-name="footer" data-ext="html"></div>
<script>
const components = document.querySelectorAll('.js-component')
const loadComponent = async c => {
const { name, ext } = c.dataset
const response = await fetch(`${name}.${ext}`)
const html = await response.text()
c.innerHTML = html
}
[...components].forEach(loadComponent)
</script>
Haben Sie eine iFrame-Injektion versucht?
Er fügt den iFrame in das Dokument ein und löscht sich selbst (er soll sich dann im HTML-DOM befinden)
<iframe src="header.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
Mit freundlichen Grüßen
Ich erstelle folgendes Web-Komponente ähnlich wie JSF
<ui-include src="b.xhtml"><ui-include>Sie verwenden können als reguläres html-Tag in Ihre Seiten einfügen (nach Einfügen des js-Codes)
customElements.define('ui-include', class extends HTMLElement {
async connectedCallback() {
let src = this.getAttribute('src');
this.innerHTML = await (await fetch(src)).text();;
}
})
ui-include { margin: 20px } /* example CSS */
<ui-include src="https://cors-anywhere.herokuapp.com/https://example.com/index.html"></ui-include>
<div>My page data... - in this snippet styles overlaps...</div>
<ui-include src="https://cors-anywhere.herokuapp.com/https://www.w3.org/index.html"></ui-include> 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.
