Question Inclure un autre fichier HTML dans un fichier HTML


J'ai 2 fichiers HTML, supposons 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 qu'à l'intérieur a.xhtml fichier, je peux inclure b.xhtml.

Comment pouvons-nous le faire dans *.html fichier?


491
2018-01-24 14:51


origine


Réponses:


À mon avis, la meilleure solution utilise jQuery:

a.html:

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

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

b.html:

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

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

Le jQuery .load() la documentation est ici.


567
2018-01-25 13:17



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

a.html:

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

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

      ...

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

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 ne souhaite pas utiliser jQuery est que jQuery.js a une taille de ~ 90kb, et je veux que la quantité de données à charger soit aussi réduite que possible.

Pour 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 utilisez simplement le script bash suivant publié en tant que Gist sur Github, qui automatise tout le travail nécessaire, la conversion b.html à b.js:      https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6

Crédits à Greg Minshall pour la commande sed améliorée qui échappe également aux barres obliques et aux guillemets simples, ce que ma commande sed d'origine n'a pas prise en compte.


122
2018-03-06 14:40



En élargissant la réponse de lolo ci-dessus, voici un peu plus d'automatisation si vous devez inclure beaucoup de fichiers:

<script>
  $(function(){
    var includes = $('[data-include]');
    jQuery.each(includes, function(){
      var file = 'views/' + $(this).data('include') + '.html';
      $(this).load(file);
    });
  });
</script>

Et puis pour inclure quelque chose dans le html:

<div data-include="header"></div>
<div data-include="footer"></div>

Ce qui inclurait le fichier views / header.html et views / footer.html


93
2017-08-05 15:52



Vérification des importations HTML5 via le tutoriel Html5rocks et à projet polymère

Par exemple:

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>

68
2018-03-03 08:41



Fiche sans vergogne d'une bibliothèque que j'ai écrit le résoudre.

https://github.com/LexmarkWeb/csi.js

<div data-include="/path/to/include.html"></div>

Ce qui précède prendra le contenu de /path/to/include.html et remplacez le div avec ça.


48
2018-01-13 16:51



Une simple directive d'inclusion côté serveur pour inclure un autre fichier trouvé dans le même dossier ressemble à ceci:

<!--#include virtual="a.html" --> 

42
2018-04-14 14:27



UNE solution très ancienne J'ai répondu à mes besoins à l'époque, mais voici comment le faire:

<!--[if IE]>
<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="some.html">
<p>backup content</p>
</object>
<![endif]-->

<!--[if !IE]> <-->
<object type="text/html" data="some.html">
<p>backup content</p>
</object>
<!--> <![endif]-->

33
2018-04-19 16:04