Javascript - Import de blocs HTML, fetch

Introduction

Pour des blocs HTML relativement statiques (entêtes, pieds de page…), on cherche souvent une méthode simple pour importer du code HTML à partir de fichiers.

Il existait une méthode simple, comme importer des fichiers CSS, JS :

<link rel="import" href="footer.html">

MAIS, cette spécification a été rendue obsolète. Elle ne fonctionne plus à partir de Chrome 73. Elle peut encore fonctionner sur certains navigateurs, toutefois son utilisation est vivement déconseillée, cette syntaxe pouvant être retirée à tout moment.

Quelle est l’alternative ? Utiliser la méthode javascript fetch.

Dans l’exemple, on veut inclure les données HTML du pied de page à partir d’un fichier appelé footer.inc :

footer.inc

<div>
	<div>
		<div>© <span id="footer-org"></span> 2001-2021. All rights reserved.</div>
		<nav class="inline-right pipe">
			<ul>
				<li><a href="/en/documents/about-sqlpac.html">About</a></li>
				<li><a href="/en/documents/cookie-privacy-policy.html">Privacy policy</a></li>
			</ul>
		</nav>
	</div>
</div>

La méthode fetch

Créer une fonction qui chargera les données après l’événement DOMContentLoaded :

loadfooter = () => {
    fetch('./include/footer.inc')
    .then ( (r) => { return r.text();  } )
    .then ( (s) => { 
            p= new DOMParser();
            d = p.parseFromString(s,'text/html') ;
    });          
};

if (document.readyState==='loading') {
  window.addEventListener('DOMContentLoaded', ()=> { loadfooter(); });
} else { loadfooter(); }

La méthode text() retourne le contenu du fichier dans une variable string.
Un nouvel objet DOM est construit à partir du string retourné avec la méthode parseFromString().

La structure de l’objet DOM est alors la suivante :

#document
<html>
 <head></head>
 <body>
  <div>
    <div>© <span id="footer-org"></span> 2001-2021. All rights reserved.</div>
    …
  </div>
 </body>
</html>

Le bloc div à insérer est alors extrait de l’objet DOM et ajouté dans le bloc footer existant dans le document :

loadfooter = () => {
    
    fetch('./include/fr/footer.inc')
    .then ( (r) => {  return r.text();  } )
    .then ( (s) => {    
            p= new DOMParser();
            d = p.parseFromString(s,'text/html') ;
            
            if ((f = d.body.querySelector('div')) !== null) {
              document.querySelector('footer').append(f);
            }
    });
};

L’élément est déplacé de l’objet DOM vers le document. Utiliser la méthode clone si on ne souhaite pas que l’élément soit supprimé de l’objet DOM pour un traitement ultérieur.

Modèles - Templates

Les méthodes fetch et parseFromString sont très utiles pour importer des fichiers modèles (templates). L’élément peut en effet être enrichi et formaté avant d’insérer celui-ci dans le document final.

loadfooter = () => {
    
    fetch('./include/fr/footer.inc')
    .then ( (r) => {  return r.text();  } )
    .then ( (s) => {    
            p= new DOMParser();
            d = p.parseFromString(s,'text/html') ;
            
            if ((f = d.body.querySelector('div')) !== null) {
              
              f.querySelector(`span[id="footer-org"]`)
              .append(document.createTextNode('SQLPAC'));
              
              document.querySelector('footer').append(f);
            }
    });
};