Insérer un fichier dans un autre en JavaScript

Devoir mettre à jour la navbar sur chaque page de son site lorsqu’on veut rajouter un lien dans celle-ci peut devenir très chronophage. Pour éviter cette perte de temps, on peut créer une fonction JavaScript qui va aller chercher un fichier navbar.html et l’intégrer dans n’importe où. Voici un exemple :

navbar.html

<nav class="navbar">
 <div class="container">
  <div class="navbar-content-wrap">
   <div class="collapse navbar-collapse" id="main-menu">
    <!-- start navigation -->
     <ul class="menu navbar-right">
      <li class="home nav-current"><a href="index.html">Home</a></li>
      <li class="features "><a href="features.html">Features</a></li>
      <li class="about "><a href="about.html">About</a></li>
     </ul>
    <!-- end navigation -->
   </div>
  </div>
 </div>
</nav>

index.html

<body onload="initNavbar();">
 <!-- start header -->
 <header id="navbar">
 </header>
 ...
</body>

JavaScript

function initNavbar (){
  $.ajax({
    type: "GET",
    url: "html/navbar.html"
  }).done(function( msg ) {
    document.getElementById("navbar").innerHTML = msg ; 
  });
}

Le JavaScript va écrire dans la balise header le contenu du fichier navbar.html, en faisant de cette façon sur toutes les pages du site, on aura à modifier uniquement le fichier navbar.html pour que le modification soit effective immédiatement sur tout le site.

On peut réaliser la même chose pour le footer ainsi que toutes les parties communes à toutes les pages du site.

Enjoy !

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.