Inclure un autre fichier HTML dans un fichier HTML

J'ai 2 fichiers HTML, supposés être a.html et b.html. Dans a.html, je veux inclure b.html.

En JSF, je peux le faire comme ça :

<ui:include src="b.xhtml" />

Cela signifie que dans le fichier a.xhtml, je peux inclure b.xhtml.

Comment peut-on le faire dans le fichier *.html ?

BalusC
Question modifiée 24 janvier 2012 в 2:59
Programmation
html include
24 janvier 2012 в 2:51
21 vues
Solution

À mon avis, la meilleure solution est d'utiliser jQuery :

a.html :



    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("b.html"); 
    });
    </script> 



     <div id="includedContent"></div>

b.html :

<p>This is my include file</p>

Cette méthode est une solution simple et propre à mon problème.

La documentation de jQuery .load() est [ici][1].

[1] : http://api.jquery.com/load/

SharpC
Réponse modifiée 4 novembre 2016 в 11:03
Commentaires (20)

Ma solution est similaire à celle de [lolo][1] ci-dessus. Cependant, j'insère le code HTML via le document.write de JavaScript au lieu d'utiliser jQuery :

a.html:



  <h1>Put your HTML content before insertion of b.js.</h1>
      ...

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

      ...

  <p>And whatever content you want afterwards.</p>

b.js:

document.write('\
\
    <h1>Add your HTML code here</h1>\
\
     <p>Notice however, that you have to escape LF's with a '\', just like\
        demonstrated in this code listing.\
    </p>\
\
');

La raison pour laquelle je n'utilise pas jQuery est que jQuery.js fait ~90kb en taille, et je veux garder la quantité de données à charger aussi petite que possible.

Afin d'obtenir le fichier JavaScript correctement échappé sans trop de travail, vous pouvez utiliser la commande sed suivante :

sed 's/\\/\\\\/g;s/^.*$/&\\/g;s/'\''/\\'\''/g' b.html > escapedB.html

Ou simplement utiliser le script bash suivant, publié sous forme de Gist sur Github, qui automatise tout le travail nécessaire, en convertissant b.html en b.js : https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6

Crédits à [Greg Minshall][2] pour la commande sed améliorée qui échappe également les slashs arrière et les guillemets simples, ce que ma commande sed originale ne prenait pas en compte.

Alternativement, pour les navigateurs qui supportent les [littéraux de modèle] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals), la commande suivante fonctionne également :

b.js:

document.write(`

    <h1>Add your HTML code here</h1>

     <p>Notice, you do not have to escape LF's with a '\',
        like demonstrated in the above code listing.
    </p>

`);

[1] : https://stackoverflow.com/users/1001224/lolo [2] : https://stackoverflow.com/users/1527747/greg-minshall

Chris Magnuson
Réponse modifiée 21 octobre 2019 в 3:24
Commentaires (10)

Comme alternative, si vous avez accès au fichier .htaccess de votre serveur, vous pouvez ajouter une simple directive qui permettra à php d'être interprété sur les fichiers se terminant par l'extension .html.

RemoveHandler .html
AddType application/x-httpd-php .php .html

Vous pouvez maintenant utiliser un simple script php pour inclure d'autres fichiers tels que :

<?php include('b.html'); ?>
Commentaires (5)