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

Inclure un autre fichier HTML dans un fichier HTML

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

Ainsi, par exemple, j'ai la structure de fichiers 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 toujours suivre l'exemple dans l'autre post où ils créent un div et remplissent le div via jquery?

19
Happydevdays 8 août 2016 à 23:19

3 réponses

Meilleure réponse

Méthode 1:

Je pense que ce serait la meilleure façon d'inclure un contenu / fichier html dans un autre fichier html en utilisant jQuery.

Vous pouvez simplement inclure le jQuery.js et charger le fichier HTML en utilisant $("#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'y a pas de telles balises disponibles pour inclure le fichier mais il existe des méthodes tierces disponibles comme ceci:

<!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é des inclusions côté serveur (SSI):

<!--#include virtual="a.html" --> 
27
Étienne 11 juil. 2019 à 09:41

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 placer un espace réservé pour l'insertion.

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

Le dossier créé "inclut" tous les fichiers que je devais inclure. Fichier créé "example.html". Il fonctionne avec un nombre illimité d'inclusions. Il vous suffit d'utiliser la convention de nom et de placer tous les fichiers inclus dans le bon dossier.

4
Maxim Trushin 14 déc. 2017 à 21:22

Utilisez la balise <object>:

<object data="filename.html"></object>
1
Ritesh Khandekar 17 août 2019 à 11:47