Inclure un autre fichier HTML dans un fichier HTML

627

J'ai 2 fichiers HTML, supposons a.htmlet b.html. Dans a.htmlje veux inclure b.html.

En JSF, je peux le faire comme ça:

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

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

Comment pouvons-nous le faire en *.htmlfichier?

javascript html include lolo
la source
5
doublon possible de l' équivalent de include () dans HTML
Wesley Murch
32
NON! ses 2 choses différentes!
lolo
liés, mais pour localhost: stackoverflow.com/questions/7542872/…
cregox
<object type = "text / html" data = "b.xhtml"> </object>
MarMarAba
Voir les modules HTML github.com/w3c/webcomponents/blob/gh-pages/proposals/… et groups.google.com/a/chromium.org/forum/#!msg/blink-dev/… et github.com/w3c / WebComponents / blob / gh-pages / propositions / ... et la discussion de fond à github.com/w3c/webcomponents/issues/645 et une discussion au sujet github.com/w3c/webcomponents/issues/783
sideshowbarker

Réponses:

687

À 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.

La .load()documentation jQuery est ici .

lolo
la source
5
Quelle est la différence de faire juste ce `<script> $ (" # includedContent "). Load (" b.html "); </script>?
Rodrigo Ruiz
10
@RodrigoRuiz $(function(){})ne s'exécutera qu'après le chargement du document.
ProfK
8
Si le fichier HTML inclus est associé à du CSS, il peut perturber le style de votre page.
Omar Jaafor
6
Je suis exactement comme vous l'avez mentionné. J'utilise bootstrap et j'ai des remplacements CSS pour B.html. Lorsque j'utilise B.html dans A.html pour qu'il finisse comme en-tête de A.html, je peux voir que le CSS a perdu sa priorité et a une disposition différente. Des solutions à cela?.
Pavan Dittakavi,
38
Cela nécessite un serveur . Lorsque vous l'utilisez sur un fichier local:XMLHttpRequest cannot load file:///.../b.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
Basj
155

En développant la réponse de lolo d'en haut, 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 comprendrait le fichier views / header.html et views / footer.html

mhanisch
la source
Très utile. Existe-t-il un moyen de passer un argument via un autre paramètre de données, comme data-argumentet de le récupérer dans le fichier inclus?
chris
@chris Vous pouvez utiliser les paramètres GET, par exemple$("#postdiv").load('posts.php?name=Test&age=25');
Nam G VU
5
Petite suggestion - vous n'avez pas besoin de class="include"- faites simplement votre sélecteur jQueryvar includes = $('[data-include]');
jbyrd
ne fonctionne pas sur Chrome avec des fichiers locaux "Les demandes d'origine croisée ne sont prises en charge que pour les schémas de protocole: htt"
Artem Bernatskyi
2
@ArtemBernatskyi Cela aide-t-il lorsque vous exécutez un serveur local à la place? Voici un tutoriel simple: developer.mozilla.org/en-US/docs/Learn/Common_questions/…
mhanisch
146

Ma solution est similaire à celle de lolo ci-dessus. Cependant, j'insère le code HTML via le 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 n'utilise pas jQuery est que jQuery.js a une taille de ~ 90 Ko, et je souhaite que la quantité de données à charger soit 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 utilisez simplement le script bash pratique publié sous forme de Gist sur Github, qui automatise tous les travaux nécessaires, en les convertissant b.htmlen b.js: https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6

Remerciements à Greg Minshall pour la commande sed améliorée qui échappe également aux barres obliques inversées et aux guillemets simples, que ma commande sed originale ne prenait pas en compte.

Sinon, pour les navigateurs qui prennent en charge les littéraux de modèle, les éléments suivants fonctionnent é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>

`);
Tafkadasoh
la source
4
@TrevorHickey Oui, vous avez raison, c'est l'inconvénient de ma solution, et ce n'est pas très élégant. Cependant, comme vous pouvez insérer un «\» avec une simple expression régulière à la fin de chaque ligne, cela fonctionne le mieux pour moi. Hmm ... je devrais peut-être ajouter à ma réponse comment faire l'insertion via regex ...
Tafkadasoh
2
Oh sheesh, c'est moche - non merci. Je préfère écrire mon html en html. Je ne me soucie pas si je peux utiliser sed sur la ligne de commande - je ne veux pas avoir à m'y fier à chaque fois que je change le contenu du modèle.
jbyrd
1
@Goodra Il devrait fonctionner sur n'importe quel code HTML sans 'marques. Si vous faites juste une recherche / remplacement pour remplacer ` with \ `ALORS trouver / remplacer pour remplacer 'par \'et new-lines avec` `new-lines cela fonctionnera bien.
wizzwizz4
1
@ wizzwizz4: Grâce à Greg, la commande sed échappe désormais également aux guillemets simples et aux barres obliques inverses. De plus, j'ai ajouté un script bash qui fait tout le travail pour vous. :-)
Tafkadasoh
1
Vous pouvez utiliser des backticks `- puis vous pouvez insérer des expressions comme ${var}- vous n'avez alors qu'à vous échapper \`et\$
inetphantom
85

Checkout HTML5 importe via le tutoriel Html5rocks et au projet polymère

Par exemple:

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>
user1587439
la source
27
Les importations HTML ne sont pas censées inclure directement le contenu de la page. Le code de cette réponse n'est stuff.htmldisponible qu'en tant que modèle dans la page parent, mais vous devez utiliser des scripts pour créer des clones de son DOM dans la page parent afin qu'ils soient visibles pour l'utilisateur.
waldyrious
1
Les instructions sur html5rocks.com pour insérer le contenu d'une page HTML dans une autre ne semblent pas encore fonctionner dans de nombreux navigateurs. Je l'ai essayé dans Opera 12.16 et Superbird Version 32.0.1700.7 (233448) sans effet (sur Xubuntu 15.04). J'ai entendu dire que cela ne fonctionne pas dans Firefox (en raison d'un bug qui, espérons-le, a été corrigé) ou dans de nombreuses versions de Chrome. Donc, même s'il semble que ce soit une solution idéale à l'avenir, ce n'est pas une solution multi-navigateur.
Brōtsyorfuzthrāx
1
Apparemment pas prêt fin 2016 dans FireFox (45.5.1 ESR). Console JS dit: TypeError: ... .import is undefined. MDN dit "Cette fonctionnalité n'est pas implémentée nativement dans les navigateurs pour le moment." Est-ce que quelqu'un sait s'il est possible de construire FF avec cette fonctionnalité?
sphakka
3
Firefox ne le supportera pas. Pour l'activer, essayez de définir "dom.webcomponents.enabled". Il ne fonctionnera que dans Chrome et Opera, Android avec une vue Web pouvant être mise à jour (startng 4.4.3). Les navigateurs Apple ne le prennent pas en charge. Cela ressemble à une bonne idée pour les composants Web, mais pas encore largement mis en œuvre.
Maxim
9
Mise à jour fin 2018: les importations HTML sont apparemment dépréciées pour une raison quelconque
V. Rubinetti
60

Plug sans vergogne d'une bibliothèque que j'ai écrite pour résoudre ce problème.

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.htmlet le remplacera divpar.

Michael Marr
la source
4
Cela évaluera-t-il JavaScript si include.html l'a intégré?
Seth
1
@Seth, il ne semble pas. Je vais jouer avec le src et voir si je peux le faire. Merci à michael-marr
xandout
2
Brillant!!!! La vôtre semble la seule solution qui REMPLACE la balise div utilisée comme jeton pour savoir où insérer. Je vais étudier attentivement la source plus tard !! :-)
kpollock
1
grâce à cela fonctionne, il inclut le HTML / CSS mais pas le Javascript des fichiers source. Il vous suffit de l'inclure à nouveau partout où vous utilisez le <div data-include="/path/to/include.html"></div>. Cet outil permet de créer plus facilement une maquette multipage simple sans plug-in.
Vincent Tang
1
puis-je utiliser cette bibliothèque dans n'importe quelle application? Je veux dire comment peut créditer l'auteur? W3School a une solution similaire, à la seule différence que votre code répond également aux appels récursifs lors du chargement de la fenêtre .... w3schools.com/howto/tryit.asp?filename=tryhow_html_include_1
yeppe
43

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

<!--#include virtual="a.html" -->
Webdesign7 Londres
la source
21
Vous devez configurer votre serveur pour utiliser SSI
lolo
7
Voici une référence pour configurer le SSI pour votre serveur: httpd.apache.org/docs/2.4/howto/ssi.html#configuring
shasi kanth
<!--#include file="a.html" -->
Ça
L'inclusion SSI rend Web-Server un peu plus lent (donc devrait être évité jusqu'à la nécessité absolue).
Amit Verma du
36

Pas besoin de scripts. Pas besoin de faire des trucs fantaisistes côté serveur (ce qui serait probablement une meilleure option)

<iframe src="/path/to/file.html" seamless></iframe>

Étant donné que les anciens navigateurs ne prennent pas en charge la transparence, vous devez ajouter des CSS pour y remédier:

iframe[seamless] {
    border: none;
}

Gardez à l'esprit que pour les navigateurs qui ne prennent pas en charge la transparence, si vous cliquez sur un lien dans l'iframe, le cadre ira à cette URL, pas à toute la fenêtre. Un moyen de contourner cela est d'avoir tous les liens target="_parent", mais le support du navigateur est "assez bon".

bjb568
la source
7
il ne semble pas appliquer les styles css depuis la page parent par exemple.
Randy
5
@Randy Alors? Cela pourrait être considéré comme un plus (en particulier pour le contenu généré par les utilisateurs, etc.). Vous pouvez facilement réintégrer les fichiers css de toute façon sans faire d'autre demande à cause de la mise en cache de toute façon.
bjb568
Répond à mes besoins pour la réponse à cette question - comment inclure un fichier html dans un autre fichier html ...
Grimxn
2
C'est la meilleure réponse SANS JQuery ni scripts. Nice bjb568 merci!
DBS
12
L' seamlessattribut a été supprimé du brouillon HTML dont il est issu. Ne l'utilisez pas.
Mitja
33

Une solution très ancienne que j'avais satisfaite à l'époque, mais voici comment faire du code conforme aux normes:

<!--[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]-->
Aleksandar Vacić
la source
9
Il semble que <object>, <embed>et <iframe>tous fonctionnent pour cela, mais dans les trois cas, ils créent des documents séparés avec leurs propres contextes de style et de script (iframe comprend en particulier des bordures et des barres de défilement moches), et par exemple, tous les liens par défaut s'ouvrent en eux plutôt que sur le page parent (bien que cela puisse être remplacé par target = "_ parent"). De tous ces éléments, iframe est le seul qui espère devenir plus intégré via l' seamlessattribut HTML5 (mentionné par bjb568), mais il n'est pas encore bien pris en charge: caniuse.com/#feat=iframe-sireless
waldyrious
2
iframe-seamless a été supprimé de la norme HTML: github.com/whatwg/html/issues/331 . Donc, le commentaire @waldyrious n'est plus correct (vous
voulez
1
Merci pour le heads-up, @ TomášPospíšek. Je ne peux plus modifier mon commentaire, mais j'espère que votre réponse fournit la mise en garde nécessaire aux lecteurs. Pour être clair, la dernière phrase (sur l' seamlessattribut) est la seule partie obsolète - le reste s'applique toujours.
waldyrious
17

Comme alternative, si vous avez accès au fichier .htaccess sur votre serveur, vous pouvez ajouter une directive simple qui permettra d'interpréter php 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'); ?>
rtd1123
la source
28
Oui, c'est un très mauvais conseil. Les fichiers html sont statiques et sont servis par apache très rapidement. Si vous ajoutez tous les fichiers html à l'analyseur php juste pour inclure des fichiers, vous aurez beaucoup de problèmes de performances sur vos serveurs. La méthode javascript (jQuery ou plain JS) ne sont pas de très bonnes solutions, mais elles sont toujours bien plus efficaces et moins dangereuses que celle-ci.
Gfra54
@ Gfra54 Voulez-vous dire que nous aurons des problèmes de performances si nous utilisons Apache uniquement pour cela, et que nous ne faisons aucun travail php pour le site? Ou cela ralentira-t-il si j'utilise php et cette chose ensemble?
user3459110
1
Attention: l'ajout de ces lignes à .htaccesspeut entraîner le htmltéléchargement des pages en tant que fichiers plutôt que leur affichage dans le navigateur. Testez d'abord. Avertissement: cela m'est arrivé tout à l'heure lorsque j'ai essayé la solution ci-dessus. Mon .htaccessétait vide à l'exception de plus de deux lignes. Attention conseillée. Essayez loloplutôt la solution jQuery (ci-dessous).
cssyphus
homme, je me compliquais même si je l'ai déjà fait. Merci pour le rappel. Dans le but dont j'ai besoin, cela n'affecte pas vraiment les performances, donc je suis cool.
Gman
Ha, cette réponse écrasante en termes de performances est un exemple génial de réflexion originale. Je ne le suggérerais jamais, mais peut-être une bouée de sauvetage lorsque vous avez besoin d'un petit coup de marteau php. :-)
moodboom
14

La suite fonctionne si le contenu html d'un fichier doit être inclus: Par exemple, la ligne suivante inclura le contenu de piece_to_include.html à l'emplacement où se produit la définition OBJECT.

...text before...
<OBJECT data="file_to_include.html">
Warning: file_to_include.html could not be included.
</OBJECT>
...text after...

Référence: http://www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4

Cool mec
la source
2
Fonctionne comme un charme et c'est la solution la plus propre. Ce devrait être la réponse acceptée.
vbocan
Se mettre d'accord. Une seule remarque: n'essayez pas de faire une balise d'objet à fermeture automatique. Le texte après il sera effacé.
Sridhar Sarnobat
Il semble créer un nouveau "#document" qui contient automatiquement de nouvelles balises <html> et <body> imbriquées. Cela n'a pas fonctionné pour mon but; mon fichier .html contient des balises <script src = "..." type = "text / javascript">; mais le JS a obtenu de nouvelles erreurs de référence.
IAM_AL_X
12

Voici ma solution sur place:

(() => {
    const includes = document.getElementsByTagName('include');
    [].forEach.call(includes, i => {
        let filePath = i.getAttribute('src');
        fetch(filePath).then(file => {
            file.text().then(content => {
                i.insertAdjacentHTML('afterend', content);
                i.remove();
            });
        });
    });
})();
<p>FOO</p>

<include src="a.html">Loading...</include>

<p>BAR</p>

<include src="b.html">Loading...</include>

<p>TEE</p>
Développer l'extrait

Mustafa Burak Kalkan
la source
1
woow, c'est plus simple
Arian saputra
Solution vraiment sympa et simple, merci ^^
Remling
11

Dans w3.js, des travaux comme celui-ci sont inclus:

<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>

Pour une description correcte, regardez ceci: https://www.w3schools.com/howto/howto_html_include.asp

Kaj Risberg
la source
Si vous voulez savoir quand le document a été chargé, vous pouvez le mettre à la fin du document: <img src = "thisimagedoesnotexist.dmy" onerror = 'initDocument ()' style = 'display: none;'> Astuce astucieuse hein?
Kaj Risberg
2
ne fonctionne pas avec google chrome.
deepcell
9

C'est ça qui m'a aidé. Pour ajouter un bloc de code html de b.htmlà a.html, cela devrait aller dans la headbalise de a.html:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Ensuite, dans la balise body, un conteneur est créé avec un identifiant unique et un bloc javascript pour charger le b.htmldans le conteneur, comme suit:

<div id="b-placeholder">

</div>

<script>
$(function(){
  $("#b-placeholder").load("b.html");
});
</script>
Ramtin
la source
6
En quoi cette réponse est-elle différente de la réponse acceptée à cette question?
Mohammad Usman
2
@MohammadUsman Ici, le conteneur et le code javascript se trouvent dans la balise body tandis que la réponse acceptée les place dans la balise head et ne laisse le conteneur que dans la balise body.
Ramtin
Cela ne vaut pas une nouvelle réponse ... c'est un commentaire
Kennet Celeste
8

Je sais que c'est un très vieux post, donc certaines méthodes n'étaient pas disponibles à l'époque. Mais voici ma vision très simple (basée sur la réponse de Lolo).

Il s'appuie sur les attributs HTML5 data- * et est donc très générique en ce qu'il utilise la fonction for-each de jQuery pour obtenir chaque .class correspondant à "load-html" et utilise son attribut 'data-source' respectif pour charger le contenu:

<div class="container-fluid">
    <div class="load-html" id="NavigationMenu" data-source="header.html"></div>
    <div class="load-html" id="MainBody" data-source="body.html"></div>
    <div class="load-html" id="Footer" data-source="footer.html"></div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
    $(".load-html").each(function () {
        $(this).load(this.dataset.source);
    });
});
</script>
Ben Mc
la source
7

Vous pouvez utiliser un polyfill d'import HTML ( https://www.html5rocks.com/en/tutorials/webcomponents/imports/ ), ou cette solution simplifiée https://github.com/dsheiko/html-import

Par exemple, sur la page vous importez un bloc HTML comme ça:

<link rel="html-import" href="./some-path/block.html" >

Le bloc peut avoir ses propres importations:

<link rel="html-import" href="./some-other-path/other-block.html" >

L'importateur remplace la directive par le code HTML chargé un peu comme SSI

Ces directives seront servies automatiquement dès que vous chargerez ce petit JavaScript:

<script async src="./src/html-import.js"></script>

Il traitera les importations lorsque DOM sera prêt automatiquement. En outre, il expose une API que vous pouvez utiliser pour exécuter manuellement, pour obtenir des journaux, etc. Prendre plaisir :)

Dmitry Sheiko
la source
Où la ligne de script doit-elle aller dans le fichier html?
Andrew Truckle
N'importe où dans le corps. Peut être placé récursivement dans le contenu des fichiers inclus
Dmitry Sheiko
Avez-vous testé cela?
Bhikkhu Subhuti
Je l'ai sûrement fait. Je l'utilise depuis des années. Pourquoi demander? Des problèmes?
Dmitry Sheiko
Donc, la "clé" de cela est le script async srcsemble-t-il. L'essayer!
javadba
6

La plupart des solutions fonctionnent mais elles ont un problème avec jquery :

Le problème est que le code suivant $(document).ready(function () { alert($("#includedContent").text()); }n'alerte rien au lieu d'alerter le contenu inclus.

J'écris le code ci-dessous, dans ma solution, vous pouvez accéder au contenu inclus dans la $(document).readyfonction:

(La clé charge le contenu inclus de manière synchrone).

index.htm :

<html>
    <head>
        <script src="jquery.js"></script>

        <script>
            (function ($) {
                $.include = function (url) {
                    $.ajax({
                        url: url,
                        async: false,
                        success: function (result) {
                            document.write(result);
                        }
                    });
                };
            }(jQuery));
        </script>

        <script>
            $(document).ready(function () {
                alert($("#test").text());
            });
        </script>
    </head>

    <body>
        <script>$.include("include.inc");</script>
    </body>

</html>

include.inc :

<div id="test">
    There is no issue between this solution and jquery.
</div>

jquery inclut un plugin sur github

Amir Saniyan
la source
Lorsque vous l'utilisez et que vous affichez la page source depuis un navigateur, vous ne voyez que le script. Cela n'affecte-t-il pas la capacité des moteurs de recherche à analyser votre site, détruisant finalement tous les efforts de référencement?
hmcclungiii
Oui, cette méthode détruisant tout SEO :)
Amir Saniyan
Là encore, chaque méthode basée sur JavaScript le fait.
wizzwizz4
5

Pour insérer le contenu du fichier nommé:

<!--#include virtual="filename.htm"-->
St.Eve
la source
1
utiliser des crochets pour []: [! - # include virtual = "include_omega.htm" -]
St.Eve
4

La réponse d'Athari (la première!) Était trop concluante! Très bon!

Mais si vous souhaitez passer le nom de la page à inclure comme paramètre d'URL , ce message a une très bonne solution à utiliser en combinaison avec:

http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html

Cela devient donc quelque chose comme ceci:

Votre URL: 

www.yoursite.com/a.html?p=b.html

Le code a.html devient maintenant:

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    function GetURLParameter(sParam)
    {
      var sPageURL = window.location.search.substring(1);
      var sURLVariables = sPageURL.split('&');
      for (var i = 0; i < sURLVariables.length; i++) 
      {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
      }
    }​
    $(function(){
      var pinc = GetURLParameter('p');
      $("#includedContent").load(pinc); 
    });
    </script> 
  </head> 

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

Cela a très bien fonctionné pour moi! J'espère avoir aidé :)

Massa
la source
Problème de sécurité, car vous pouvez envoyer ce lien à quelqu'un:
www.votresite.com/a.html?p=htttp://www.linktovir.us/here.html
4

html5rocks.com a un très bon tutoriel sur ce genre de choses, et cela pourrait être un peu tard, mais je ne savais pas moi-même que cela existait. w3schools a également un moyen de le faire en utilisant sa nouvelle bibliothèque appelée w3.js. Le fait est que cela nécessite l'utilisation d'un serveur Web et d'un objet HTTPRequest. Vous ne pouvez pas réellement les charger localement et les tester sur votre machine. Ce que vous pouvez faire cependant, utilisez les polyfills fournis sur le lien html5rocks en haut, ou suivez leur tutoriel. Avec un peu de magie JS, vous pouvez faire quelque chose comme ceci:

 var link = document.createElement('link');
 if('import' in link){
     //Run import code
     link.setAttribute('rel','import');
     link.setAttribute('href',importPath);
     document.getElementsByTagName('head')[0].appendChild(link);
     //Create a phantom element to append the import document text to
     link = document.querySelector('link[rel="import"]');
     var docText = document.createElement('div');
     docText.innerHTML = link.import;
     element.appendChild(docText.cloneNode(true));
 } else {
     //Imports aren't supported, so call polyfill
     importPolyfill(importPath);
 }

Cela rendra le lien (peut devenir l'élément de lien souhaité s'il est déjà défini), définir l'importation (sauf si vous l'avez déjà), puis l'ajouter. Il va ensuite prendre cela et analyser le fichier en HTML, puis l'ajouter à l'élément souhaité sous une div. Tout cela peut être modifié pour s'adapter à vos besoins, de l'élément ajouté au lien que vous utilisez. J'espère que cela a aidé, cela peut ne plus être pertinent maintenant si des moyens plus récents et plus rapides sont sortis sans utiliser de bibliothèques et de cadres tels que jQuery ou W3.js.

MISE À JOUR: Cela générera une erreur indiquant que l'importation locale a été bloquée par la stratégie CORS. Peut avoir besoin d'accéder au web profond pour pouvoir l'utiliser en raison des propriétés du web profond. (Ce qui signifie pas d'utilisation pratique)

SubLock69
la source
4

Voici mon approche en utilisant l'API Fetch et la fonction asynchrone

<div class="js-component" data-name="header" data-ext="html"></div>
<div class="js-component" data-name="footer" data-ext="html"></div>

<script>
    const components = document.querySelectorAll('.js-component')

    const loadComponent = async c => {
        const { name, ext } = c.dataset
        const response = await fetch(`${name}.${ext}`)
        const html = await response.text()
        c.innerHTML = html
    }

    [...components].forEach(loadComponent)
</script>
barro32
la source
3

Il n'y a pas de solution HTML directe pour la tâche pour l'instant. Même les importations HTML (qui sont en permanence en version préliminaire ) ne feront pas l'affaire, car Import! = Include et un peu de magie JS seront de toute façon nécessaires.
J'ai récemment écrit un script VanillaJS qui est juste pour l'inclusion de HTML dans HTML, sans aucune complication.

Il suffit de placer dans votre a.html

<link data-wi-src="b.html" />
<!-- ... and somewhere below is ref to the script ... -->
<script src="wm-html-include.js"> </script>

C'est open-sourceet peut donner une idée (j'espère)

al.scvorets
la source
3

Vous pouvez le faire avec la bibliothèque jQuery de JavaScript comme ceci:

HTML:

<div class="banner" title="banner.html"></div>

JS:

$(".banner").each(function(){
    var inc=$(this);
    $.get(inc.attr("title"), function(data){
        inc.replaceWith(data);
    });
});

Veuillez noter qu'il banner.htmldoit se trouver sous le même domaine que vos autres pages, sinon vos pages Web refuseront le banner.htmlfichier en raison des politiques de partage des ressources d'origine croisée .

Veuillez également noter que si vous chargez votre contenu avec JavaScript, Google ne pourra pas l'indexer, ce n'est donc pas exactement une bonne méthode pour des raisons de référencement.

AndrewL64
la source
2

Avez-vous essayé une injection iFrame?

Il injecte l'iFrame dans le document et se supprime (il est censé être alors dans le DOM HTML)

<iframe src="header.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>

Cordialement

Alban Lusitanae
la source
1

Je suis venu sur ce sujet à la recherche de quelque chose de similaire, mais un peu différent du problème posé par lolo. Je voulais construire une page HTML contenant un menu alphabétique de liens vers d'autres pages, et chacune des autres pages pourrait ou non exister, et l'ordre dans lequel elles ont été créées pourrait ne pas être alphabétique (ni même numérique). De plus, comme Tafkadasoh, je ne voulais pas gonfler la page Web avec jQuery. Après avoir étudié le problème et expérimenté pendant plusieurs heures, voici ce qui a fonctionné pour moi, avec des remarques pertinentes ajoutées:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/application/html; charset=iso-8859-1">
  <meta name="Author" content="me">
  <meta copyright="Copyright" content= "(C) 2013-present by me" />
  <title>Menu</title>

<script type="text/javascript">
<!--
var F000, F001, F002, F003, F004, F005, F006, F007, F008, F009,
    F010, F011, F012, F013, F014, F015, F016, F017, F018, F019;
var dat = new Array();
var form, script, write, str, tmp, dtno, indx, unde;

/*
The "F000" and similar variables need to exist/be-declared.
Each one will be associated with a different menu item,
so decide on how many items maximum you are likely to need,
when constructing that listing of them.  Here, there are 20.
*/


function initialize()
{ window.name="Menu";
  form = document.getElementById('MENU');
  for(indx=0; indx<20; indx++)
  { str = "00" + indx;
    tmp = str.length - 3;
    str = str.substr(tmp);
    script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = str + ".js";
    form.appendChild(script);
  }

/*
The for() loop constructs some <script> objects
and associates each one with a different simple file name,
starting with "000.js" and, here, going up to "019.js".
It won't matter which of those files exist or not.
However, for each menu item you want to display on this
page, you will need to ensure that its .js file does exist.

The short function below (inside HTML comment-block) is,
generically, what the content of each one of the .js files looks like:
<!--
function F000()
{ return ["Menu Item Name", "./URLofFile.htm", "Description string"];
}
-->

(Continuing the remarks in the main menu.htm file)
It happens that each call of the form.appendChild() function
will cause the specified .js script-file to be loaded at that time.
However, it takes a bit of time for the JavaScript in the file
to be fully integrated into the web page, so one thing that I tried,
but it didn't work, was to write an "onload" event handler.
The handler was apparently being called before the just-loaded
JavaScript had actually become accessible.

Note that the name of the function in the .js file is the same as one
of the the pre-defined variables like "F000".  When I tried to access
that function without declaring the variable, attempting to use an
"onload" event handler, the JavaScript debugger claimed that the item
was "not available".  This is not something that can be tested-for!
However, "undefined" IS something that CAN be tested-for.  Simply
declaring them to exist automatically makes all of them "undefined".
When the system finishes integrating a just-loaded .js script file,
the appropriate variable, like "F000", will become something other
than "undefined".  Thus it doesn't matter which .js files exist or
not, because we can simply test all the "F000"-type variables, and
ignore the ones that are "undefined".  More on that later.

The line below specifies a delay of 2 seconds, before any attempt
is made to access the scripts that were loaded.  That DOES give the
system enough time to fully integrate them into the web page.
(If you have a really long list of menu items, or expect the page
to be loaded by an old/slow computer, a longer delay may be needed.)
*/

  window.setTimeout("BuildMenu();", 2000);
  return;
}


//So here is the function that gets called after the 2-second delay  
function BuildMenu()
{ dtno = 0;    //index-counter for the "dat" array
  for(indx=0; indx<20; indx++)
  { str = "00" + indx;
    tmp = str.length - 3;
    str = "F" + str.substr(tmp);
    tmp = eval(str);
    if(tmp != unde) // "unde" is deliberately undefined, for this test
      dat[dtno++] = eval(str + "()");
  }

/*
The loop above simply tests each one of the "F000"-type variables, to
see if it is "undefined" or not.  Any actually-defined variable holds
a short function (from the ".js" script-file as previously indicated).
We call the function to get some data for one menu item, and put that
data into an array named "dat".

Below, the array is sorted alphabetically (the default), and the
"dtno" variable lets us know exactly how many menu items we will
be working with.  The loop that follows creates some "<span>" tags,
and the the "innerHTML" property of each one is set to become an
"anchor" or "<a>" tag, for a link to some other web page.  A description
and a "<br />" tag gets included for each link.  Finally, each new
<span> object is appended to the menu-page's "form" object, and thereby
ends up being inserted into the middle of the overall text on the page.
(For finer control of where you want to put text in a page, consider
placing something like this in the web page at an appropriate place,
as preparation:
<div id="InsertHere"></div>
You could then use document.getElementById("InsertHere") to get it into
a variable, for appending of <span> elements, the way a variable named
"form" was used in this example menu page.

Note: You don't have to specify the link in the same way I did
(the type of link specified here only works if JavaScript is enabled).
You are free to use the more-standard "<a>" tag with the "href"
property defined, if you wish.  But whichever way you go,
you need to make sure that any pages being linked actually exist!
*/

  dat.sort();
  for(indx=0; indx<dtno; indx++)
  { write = document.createElement('span');
    write.innerHTML = "<a onclick=\"window.open('" + dat[indx][1] +
                      "', 'Menu');\" style=\"color:#0000ff;" + 
                      "text-decoration:underline;cursor:pointer;\">" +
                      dat[indx][0] + "</a> " + dat[indx][2] + "<br />";
    form.appendChild(write);
  }
  return;
}

// -->
</script>
</head>

<body onload="initialize();" style="background-color:#a0a0a0; color:#000000; 

font-family:sans-serif; font-size:11pt;">
<h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;MENU
<noscript><br /><span style="color:#ff0000;">
Links here only work if<br />
your browser's JavaScript<br />
support is enabled.</span><br /></noscript></h2>
These are the menu items you currently have available:<br />
<br />
<form id="MENU" action="" onsubmit="return false;">
<!-- Yes, the <form> object starts out completely empty -->
</form>
Click any link, and enjoy it as much as you like.<br />
Then use your browser's BACK button to return to this Menu,<br />
so you can click a different link for a different thing.<br />
<br />
<br />
<small>This file (web page) Copyright (c) 2013-present by me</small>
</body>
</html>
vernonner3voltazim
la source
1

Voici un excellent article , vous pouvez implémenter une bibliothèque commune et utiliser simplement le code ci-dessous pour importer tous les fichiers HTML sur une seule ligne.

<head>
   <link rel="import" href="warnings.html">
</head>

Vous pouvez également essayer Google Polymer

Dhiral Pandya
la source
6
"il suffit d'utiliser le code ci-dessous pour importer tous les fichiers HTML sur une seule ligne" est assez fallacieux. Vous devez ensuite écrire du JS pour utiliser n'importe quel contenu que vous avez importé, il finit donc par être bien plus qu'une "ligne".
skybondsor
1

Utiliser des backticks ES6 ``: modèles littéraux !

let nick = "Castor", name = "Moon", nuts = 1

more.innerHTML = `

<h1>Hello ${nick} ${name}!</h1>

You collected ${nuts} nuts so far!

<hr>

Double it and get ${nuts + nuts} nuts!!

` 
<div id="more"></div>
Développer l'extrait

De cette façon, nous pouvons inclure du HTML sans coder les guillemets, inclure des variables du DOM, etc.

C'est un puissant moteur de création de modèles, nous pouvons utiliser des fichiers js séparés et utiliser des événements pour charger le contenu en place, ou même tout séparer en morceaux et appeler à la demande:

let inject = document.createElement('script');
inject.src= '//....com/template/panel45.js';
more.appendChild(inject);

https://caniuse.com/#feat=template-literals

NVRM
la source
1
Bel exemple - pourquoi pas de votes positifs (jusqu'à présent)?
javadba
Hé, vous avez raison, en 2018, ce qui précède était un signe clair d'un bon RTFM;) J'ai largement brisé ce javascriptbadge en tant que programmeur amateur jusque-là.
NVRM
1

Pour que la solution fonctionne, vous devez inclure le fichier csi.min.js, que vous pouvez trouver ici .

Selon l'exemple illustré sur GitHub, pour utiliser cette bibliothèque, vous devez inclure le fichier csi.js dans votre en-tête de page, puis vous devez ajouter l'attribut data-include avec sa valeur définie au fichier que vous souhaitez inclure, sur le conteneur élément.

Masquer le code de copie

<html>
  <head>
    <script src="csi.js"></script>
  </head>
  <body>
    <div data-include="Test.html"></div>
  </body>
</html>

... J'espère que cela aide.

Hamza Ali
la source
0

PHP est un langage de script au niveau du serveur. Il peut faire beaucoup de choses, mais une utilisation populaire consiste à inclure des documents HTML dans vos pages, de la même manière que SSI. Comme SSI, il s'agit d'une technologie de niveau serveur. Si vous n'êtes pas sûr d'avoir des fonctionnalités PHP sur votre site Web, contactez votre hébergeur.

Voici un script PHP simple que vous pouvez utiliser pour inclure un extrait de code HTML sur n'importe quelle page Web compatible PHP:

Enregistrez le code HTML des éléments communs de votre site dans des fichiers séparés. Par exemple, votre section de navigation peut être enregistrée sous navigation.html ou navigation.php. Utilisez le code PHP suivant pour inclure ce code HTML dans chaque page.

<?php require($DOCUMENT_ROOT . "navigation.php"); ?>

Utilisez ce même code sur chaque page que vous souhaitez inclure le fichier. Assurez-vous de changer le nom de fichier en surbrillance par le nom et le chemin d'accès à votre fichier d'inclusion.

Udara Pathirage
la source
0

Si vous utilisez un framework comme django / bootle, ils livrent souvent un moteur de template. Disons que vous utilisez une bouteille et que le moteur de modèle par défaut est SimpleTemplate Engine . Et ci-dessous est le fichier html pur

$ cat footer.tpl
<hr> <footer>   <p>&copy; stackoverflow, inc 2015</p> </footer>

Vous pouvez inclure le footer.tpl dans votre fichier principal, comme: 

$ cat dashboard.tpl
%include footer

En plus de cela, vous pouvez également passer des paramètres à votre dashborard.tpl.

jaseywang
la source
0

Sur la base de la réponse de https://stackoverflow.com/a/31837264/4360308, j'ai implémenté cette fonctionnalité avec Nodejs (+ express + cheerio) comme suit:

HTML (index.html)

<div class="include" data-include="componentX" data-method="append"></div>
<div class="include" data-include="componentX" data-method="replace"></div>

JS

function includeComponents($) {
    $('.include').each(function () {
        var file = 'view/html/component/' + $(this).data('include') + '.html';
        var dataComp = fs.readFileSync(file);
        var htmlComp = dataComp.toString();
        if ($(this).data('method') == "replace") {
            $(this).replaceWith(htmlComp);
        } else if ($(this).data('method') == "append") {
            $(this).append(htmlComp);
        }
    })
}

function foo(){
    fs.readFile('./view/html/index.html', function (err, data) {
        if (err) throw err;
        var html = data.toString();
        var $ = cheerio.load(html);
        includeComponents($);
        ...
    }
}

ajouter -> inclut le contenu dans le div

replace -> remplace le div

vous pourriez facilement ajouter plus de comportements suivant la même conception

giroxiii
la source