Dupliquer un header ou footer

bonjour a tous,
svp en développement web: j'ai mon header et mon footer dans ma page "index.html" sur ma deuxième page qui s'appelle "famille.html" j'ai envie de remettre le header et le footer sans toutes
fois avoir a faire a un copier coller du code . comment le faire en javascript svp. en PHP généralement ces avec include qu'on le fait mais sauf que sur ce projet je n'utilise pas le PHP.
bien cordialement

Bonjour,
tu as plusieurs alternatives pour arriver à « presque » réaliser un include comme en PHP.

• Utilisation d'un élément de contenu, comme <iframe>, <embed> ou <object>.

• Utilisation de JavaScript, via Ajax, pour charger du contenu dynamique.

Par exemple sur base du HTML suivant :
Code:

1 2 3 4 <div data-include ="header.html"></div> <footer data-include ="footer.html"></footer>  <user-include data-include ="header.html"></user-include>
on utilise une data-include pour pouvoir cibler les éléments devant être traités.

ensuite on crée un fichier script de « remplissage » qui pourrait-être :
includeHTML.js :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function includeHTML() { const elements = document.querySelectorAll("[data-include]"); elements.forEach((el) => { const srcFile = el.dataset.include; fetch(srcFile) .then(response => response.text()) .then(text => { el.insertAdjacentHTML("beforeend", text); el.removeAttribute("data-include"); }) .catch(function(error) { const msg = `<p style="color: red">${error.message} <b>${srcFile}</b></p>`; el.innerHTML = msg; }); }); } document.addEventListener("DOMContentLoaded", () => includeHTML());
Au final il suffit d'intégrer ce fichier à la page HTML :

Code:

<script src="includeHTML.js"></script>

... le script se chargera de la mise à jour.

Tu auras « presque la même chose » à l'exception du partage de variables.

1 pièce(s) jointe(s)

si le site est entièrement géré en javascript, vous pouvez aussi faire une page principale qui va appeler les différents éléments.
j'ai fait un test en pièce jointe.