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?
Sie können das mit der JavaScript-Bibliothek jQuery wie folgt tun:
HTML:
<div class="banner" title="banner.html"></div>JS:
$(".banner").each(function(){
var inc=$(this);
$.get(inc.attr("title"), function(data){
inc.replaceWith(data);
});
});Bitte beachten Sie, dass banner.html sollte sich unter derselben Domäne befinden wie Ihre anderen Seiten, sonst werden Ihre Webseiten die banner.html Datei aufgrund von Ursprungsübergreifende Ressourcennutzung Politiken.
Bitte beachten Sie auch, dass, wenn Sie Ihren Inhalt mit JavaScript laden, Google ihn nicht indizieren kann, was aus SEO-Gründen nicht gerade eine gute Methode ist.
Es gibt derzeit keine direkte HTML-Lösung für diese Aufgabe. Auch HTML-Importe (die permanent ist im Entwurf ) wird die Sache nicht erledigen, weil Import != Include und einige JS-Magie wird sowieso erforderlich sein.
Ich schrieb kürzlich a VanillaJS Skript das nur zur Einbindung von HTML in HTML dient, ohne jegliche Komplikationen.
Setzen Sie einfach Ihr a.html
<link data-wi-src="b.html" />
<!-- ... and somewhere below is ref to the script ... -->
<script src="wm-html-include.js"> </script> Sie ist open-source und kann einen Eindruck vermitteln (hoffe ich)
Hier ist ein großartiger Artikel Sie können eine gemeinsame Bibliothek implementieren und einfach den unten stehenden Code verwenden, um beliebige HTML-Dateien in einer Zeile zu importieren.
<head>
<link rel="import" href="warnings.html">
</head>Sie können auch versuchen Google Polymer
Damit Solution funktioniert, müssen Sie die Datei csi.min.js einbinden, die Sie hier finden können aquí .
Wie im Beispiel auf GitHub gezeigt, müssen Sie zur Verwendung dieser Bibliothek die Datei csi.js in den Header Ihrer Seite einbinden und dann das data-include-Attribut, dessen Wert auf die einzubindende Datei gesetzt ist, zum Container-Element hinzufügen.
Kopiercode ausblenden
<html>
<head>
<script src="csi.js"></script>
</head>
<body>
<div data-include="Test.html"></div>
</body>
</html>... ich hoffe, es hilft.
w3.js ist ziemlich cool.
https://www.w3schools.com/lib/w3.js
und wir sind konzentriert
aber betrachten Sie den folgenden Fall
- popup.html
- popup.js
- include.js
- partials
- head
- bootstrap-css.html
- fontawesome-css.html
- all-css.html
- hello-world.html
<!-- popup.html -->
<head>
<script defer type="module" src="popup.js"></script>
<meta data-include-html="partials/head/all-css.html">
</head>
<body>
<div data-include-html="partials/hello-world.html"></div>
</body>
<!-- bootstrap-css.html -->
<link href="https://.../bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- fontawesome-css.html -->
<link rel="stylesheet" href="https://.../font-awesome/5.15.4/css/all.min.css" />
<!-- all-css.html -->
<meta data-include-html="bootstrap-css.html">
<meta data-include-html="fontawesome-css.html">
<!--
If you want to use w3.js.include, you should change as below
<meta w3-include-html="partials/head/bootstrap-css.html">
<meta w3-include-html="partials/head/fontawesome-css.html">
Of course, you can add the above in the ``popup.html`` directly.
If you don't want to, then consider using my scripts.
-->
<!-- hello-world.html -->
<h2>Hello World</h2>// include.js
const INCLUDE_TAG_NAME = `data-include-html`
/**
* @param {Element} node
* @param {Function} cb callback
* */
export async function includeHTML(node, {
cb = undefined
}) {
const nodeArray = node === undefined ?
document.querySelectorAll(`[${INCLUDE_TAG_NAME}]`) :
node.querySelectorAll(`[${INCLUDE_TAG_NAME}]`)
if (nodeArray === null) {
return
}
for (const node of nodeArray) {
const filePath = node.getAttribute(`${INCLUDE_TAG_NAME}`)
if (filePath === undefined) {
return
}
await new Promise(resolve => {
fetch(filePath
).then(async response => {
const text = await response.text()
if (!response.ok) {
throw Error(`${response.statusText} (${response.status}) | ${text} `)
}
node.innerHTML = text
const rootPath = filePath.split("/").slice(0, -1)
node.querySelectorAll(`[${INCLUDE_TAG_NAME}]`).forEach(elem=>{
const relativePath = elem.getAttribute(`${INCLUDE_TAG_NAME}`) // not support ".."
if(relativePath.startsWith('/')) { // begin with site root.
return
}
elem.setAttribute(`${INCLUDE_TAG_NAME}`, [...rootPath, relativePath].join("/"))
})
node.removeAttribute(`${INCLUDE_TAG_NAME}`)
await includeHTML(node, {cb})
node.replaceWith(...node.childNodes) // https://stackoverflow.com/a/45657273/9935654
resolve()
}
).catch(err => {
node.innerHTML = `${err.message}`
resolve()
})
})
}
if (cb) {
cb()
}
}
// popup.js
import * as include from "include.js"
window.onload = async () => {
await include.includeHTML(undefined, {})
// ...
}<!-- popup.html -->
<head>
<link href="https://.../bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://.../font-awesome/5.15.4/css/all.min.css" />
</head>
<body>
<h2>Hello World</h2>
</body> 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.
