Insérer un fichier dans un autre en JavaScript

Insérer un fichier dans un autre en JavaScript

septembre 22nd, 2016
Astuces
1 Commentaire
Cyril

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 !