2025-12-16 18:00:01 +01:00
|
|
|
// How to use
|
|
|
|
|
// <header id="header" w3-include-html="components/header.html"></header>
|
|
|
|
|
|
|
|
|
|
|
2025-12-19 12:33:59 +01:00
|
|
|
async function includeHTML() {
|
|
|
|
|
const elements = document.querySelectorAll("[w3-include-html]");
|
2025-12-16 18:00:01 +01:00
|
|
|
|
2025-12-19 12:33:59 +01:00
|
|
|
if (elements.length === 0) {
|
|
|
|
|
return; // Plus rien à charger
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const promises = Array.from(elements).map(async (elmnt) => {
|
|
|
|
|
const file = elmnt.getAttribute("w3-include-html");
|
|
|
|
|
if (!file) return;
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
const response = await fetch(file);
|
|
|
|
|
if (response.ok) {
|
|
|
|
|
const html = await response.text();
|
|
|
|
|
elmnt.innerHTML = html;
|
|
|
|
|
} else {
|
|
|
|
|
elmnt.innerHTML = "Page not found.";
|
2025-12-16 18:00:01 +01:00
|
|
|
}
|
2025-12-19 12:33:59 +01:00
|
|
|
} catch (error) {
|
|
|
|
|
console.error(`Error loading ${file}:`, error);
|
|
|
|
|
elmnt.innerHTML = "Error loading content.";
|
2025-12-16 18:00:01 +01:00
|
|
|
}
|
|
|
|
|
|
2025-12-19 12:33:59 +01:00
|
|
|
elmnt.removeAttribute("w3-include-html");
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Attendre que tous les fichiers soient chargés
|
|
|
|
|
await Promise.all(promises);
|
|
|
|
|
await includeHTML();
|
2025-12-16 18:00:01 +01:00
|
|
|
}
|