Discussion :

[ezechias22]

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

[NoSmoking]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div data-include ="header.html"></div>
<footer data-include ="footer.html"></footer>
<!-- ou encore avec élément personnalisé -->
<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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.

[mathieu]

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.