web-dev-qa-db-fra.com

Inclure le HTML dans un autre fichier HTML

J'ai un modèle html "head" et un modèle de navigation que je souhaite inclure dans tous mes autres fichiers html de mon site. J'ai trouvé ce post:

inclure un autre fichier HTML dans un fichier HTML

Et ma question est ... que se passe-t-il si c'est l'en-tête que je veux inclure?

Ainsi, par exemple, j'ai la structure de fichier suivante:

 /var/www/includes/templates/header.html
                             navigation.html

header.html pourrait ressembler à ceci:

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Test Portal</title>

 </head>

Dans un cas comme celui-ci, puis-je quand même suivre l'exemple de l'autre message où ils créent un div et le peuplent via jquery?

javascriptjqueryhtmlinclude
16
Happydevdays

Méthode 1:

Je pense que ce serait le meilleur moyen d’inclure un contenu/fichier html dans un autre fichier html en utilisant jQuery.

Vous pouvez simplement inclure le fichier jQuery.js et charger le fichier HTML à l’aide de $("#DivContent").load("yourFile.html");

Par exemple

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

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

Méthode 2:

Il n’existe pas de balises de ce type pour inclure le fichier, mais certaines méthodes tierces sont disponibles, par exemple:

<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>

<body>

<div w3-include-html="content.html"></div> 

<script>
w3IncludeHTML();
</script>

</body>
</html>

Méthode 3:

Certaines personnes ont également utilisé SSI (Server-Side-includes):

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

J'avais besoin d'inclure de nombreux fichiers. J'ai donc créé le script suivant:

<script>
  $(function(){
    $('[id$="-include"]').each(function (e){
        $(this).load("includes\\" + $(this).attr("id").replace("-include", "") +  ".html");
    });
  });
</script>

Utilisez div, par exemple, pour mettre un espace réservé pour l'insertion.

<div id="example-include"></div>

Le dossier créé "inclut" pour tous les fichiers que je devais inclure. Fichier créé "exemple.html". Cela fonctionne avec n'importe quel nombre d'inclus. Vous devez juste utiliser la convention de nom et mettre tous les fichiers inclus dans le bon dossier.

4
Maxim Trushin

tilisation d'une balise HTML.

J'ai fait face à un problème similaire, alors j'ai utilisé

< iframe src = "b.html" height = " 80px " width = " 500px ">

1
Akash Jaiswal

Utilisation <object> tag:

<object data="filename.html"></object>
0
Rk003