Créer des fichiers d'en-tête et de pied de page à inclure dans plusieurs pages html

141

Je souhaite créer des pages d'en-tête et de pied de page communes qui sont incluses dans plusieurs pages html.

J'aimerais utiliser javascript. Existe-t-il un moyen de le faire en utilisant uniquement HTML et JavaScript?

Je souhaite charger une page d'en-tête et de pied de page dans une autre page html.

javascript jquery html css Prasanth AR
la source

1

Vous recherchez ajax ... $ ('. MyElement) .load (' urltopage.html '); cela chargera le contenu de urltopage.html dans .myElement

Salketer

stackoverflow.com/a/8592403/896341

Stefan

193

Vous pouvez accomplir cela avec jquery .

Placez ce code dans index.html

<html>
<head>
<title></title>
<script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
</script>
<script> 
$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});
</script> 
</head>
<body>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>

et mettez ce code dans header.htmlet footer.html, au même endroit queindex.html

<a href="http://www.google.com">click here for google</a>

Maintenant, lorsque vous visitez index.html, vous devriez pouvoir cliquer sur les balises de lien.

Hariprasad Prolanx
la source

Oui. toutes les pages doivent avoir cette structure de page

Hariprasad Prolanx

19

charge ou autre fonction qui importent ou utilisent un local filene fonctionne pas dans la nouvelle version de Google Chrome ou IE, raison: la sécurité!

Sinac

7

Parfois, je me demande comment les gens peuvent même respirer sans jQuery. Ou y a-t- .breathe(in)il .breathe(out)déjà un et ? Tout langage de script est purement excessif ici.

The Conspiracy

6

Je continue de recevoir

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

quand je cours dans Chrome

digiwebguy

1

Il est nécessaire d'exécuter le code sur le serveur. Ce qui signifie que l'URL doit être comme "http: // .....".

Patriotic

37

J'ajoute des parties communes comme en-tête et pied de page en utilisant Server Side includes . Aucun HTML et aucun JavaScript n'est nécessaire. Au lieu de cela, le serveur Web ajoute automatiquement le code inclus avant de faire quoi que ce soit d'autre.

Ajoutez simplement la ligne suivante à l'endroit où vous souhaitez inclure votre fichier:

<!--#include file="include_head.html" -->

La Conspiration
la source

6

j'aime cette manière démodée. En fait, il ne semble pas avoir beaucoup d'avantages à utiliser un script pour faire une action aussi simple.

Jenna Leaf

3

En fait, inclure des fichiers à l'aide d'un script présente des inconvénients majeurs: cela nuit aux performances car le client a besoin de télécharger la page principale, de charger le DOM, d'exécuter le script et seulement alors de télécharger les fichiers inclus, ce qui nécessite une demande de serveur supplémentaire par fichier inclus . L'inclusion de fichiers à l'aide de Server Side includes sert tous les éléments lors de la première requête du serveur, aucune action client n'est nécessaire.

The Conspiracy

SSI nécessite l' utilisation d' une extension de fichier: .shtml, .stm, .shtm. Il fonctionne dans Apache, LiteSpeed, nginx, lighttpd et IIS.

ubershmekel

@ubershmekel Comme vous l'avez dit, les serveurs Web concernés prennent en charge SSI. L'extension de fichier n'est pas limitée à .shtml, .stmet .shtm: Sur IIS, tous les fichiers analysés peuvent contenir SSI, par exemple .aspx. Si vous travaillez avec PHP, vous devez utiliser la commande PHP includeou à la virtualplace pour obtenir le même résultat.

The Conspiracy

33

Devez-vous utiliser la structure de fichiers html avec JavaScript? Avez-vous envisagé d'utiliser PHP à la place pour pouvoir utiliser un simple objet d'inclusion PHP?

Si vous convertissez les noms de fichiers de vos pages .html en .php - alors en haut de chacune de vos pages .php, vous pouvez utiliser une ligne de code pour inclure le contenu de votre header.php

<?php include('header.php'); ?>

Faites de même dans le pied de page de chaque page pour inclure le contenu de votre fichier footer.php

<?php include('footer.php'); ?>

Aucun JavaScript / Jquery ou fichiers inclus supplémentaires requis.

NB Vous pouvez également convertir vos fichiers .html en fichiers .php en utilisant ce qui suit dans votre fichier .htaccess

# re-write html to php
RewriteRule ^(.*)\.html$ $1.php [L]
RewriteRule ^(.+)/$ http://%{HTTP_HOST}/$1 [R=301,L]


# re-write no extension to .php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]

Sol
la source

2

@ Justin808 - l'OP ne mentionne rien à propos d'une installation hébergée localement, j'ai donc supposé qu'il parlait de fichiers basés sur le serveur.

Sol

1

@Sol Cependant, l'OP DID mentionne spécifiquement le fait de vouloir utiliser Javascript, donc votre réponse est hors sujet. Le développement Web full-stack s'éloigne rapidement de l'utilisation de PHP, Node.js fournit toutes les fonctionnalités équivalentes et ne nécessite que Javascript pour être utilisé. TL; DR veuillez répondre aux questions telles que posées. L'OP voulait une solution JS, il est donc inapproprié de lui donner une solution PHP, Ruby, Python, C ++ ou tout autre langage.

Zach

9

J'ai essayé ceci: Créez un fichier header.html comme

<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- JS -->
<script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="js/lib/angular-route.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">

<title>Your application</title>

Incluez maintenant header.html dans vos pages HTML comme:

<head>
   <script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
   <script> 
     $(function(){ $("head").load("header.html") });
   </script>
</head>

Fonctionne parfaitement bien.

Asheesh Gupta
la source

1

Belle solution, mais je pense que cela chargerait le framework jquery deux fois, une fois pour le chargement de la page initiale, et deuxièmement lorsque la méthode .load () s'exécute - puisque la page cible contient également jquery.

Delali

8

Vous pouvez également mettre: (load_essentials.js :)

document.getElementById("myHead").innerHTML =
	"<span id='headerText'>Title</span>"
	+ "<span id='headerSubtext'>Subtitle</span>";
document.getElementById("myNav").innerHTML =
	"<ul id='navLinks'>"
	+ "<li><a href='index.html'>Home</a></li>"
	+ "<li><a href='about.html'>About</a>"
	+ "<li><a href='donate.html'>Donate</a></li>"
	+ "</ul>";
document.getElementById("myFooter").innerHTML =
	"<p id='copyright'>Copyright &copy; " + new Date().getFullYear() + " You. All"
	+ " rights reserved.</p>"
	+ "<p id='credits'>Layout by You</p>"
	+ "<p id='contact'><a href='mailto:[email protected]'>Contact Us</a> / "
	+ "<a href='mailto:[email protected]'>Report a problem.</a></p>";

<!--HTML-->
<header id="myHead"></header>
<nav id="myNav"></nav>
Content
<footer id="myFooter"></footer>

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

Développer l'extrait

JustinM
la source

6

Je pense que les réponses à cette question sont trop anciennes ... actuellement, certains navigateurs de bureau et mobiles prennent en charge les modèles HTML pour ce faire.

J'ai construit un petit exemple:

Testé OK dans Chrome 61.0, Opera 48.0, Opera Neon 1.0, Android Browser 6.0, Chrome Mobile 61.0 et Adblocker Browser 54.0
Testé KO dans Safari 10.1, Firefox 56.0, Edge 38.14 et IE 11

Plus d'informations sur la compatibilité sur canisue.com

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Template Example</title>

    <link rel="stylesheet" href="styles.css">
    <link rel="import" href="autoload-template.html">
</head>
<body>

<div class="template-container">1</div>
<div class="template-container">2</div>
<div class="template-container">3</div>
<div class="template-container">4</div>
<div class="template-container">5</div>

</body>
</html>

autoload-template.html

<span id="template-content">
    Template Hello World!
</span>

<script>
    var me = document.currentScript.ownerDocument;
    var post = me.querySelector( '#template-content' );

    var container = document.querySelectorAll( '.template-container' );

    //alert( container.length );
    for(i=0; i<container.length ; i++) {
        container[i].appendChild( post.cloneNode( true ) );
    }
</script>

styles.css

#template-content {
    color: red;
}

.template-container {
    background-color: yellow;
    color: blue;
}

Vous pouvez obtenir plus d'exemples dans cet article HTML5 Rocks

JavierFuentes
la source

4

Les importations HTML sont désormais obsolètes.

Jonathan Sharman

5

Je travaille en C # / Razor et comme je n'ai pas de configuration IIS sur mon ordinateur portable personnel, j'ai cherché une solution javascript à charger dans les vues tout en créant un balisage statique pour notre projet.

Je suis tombé sur un site Web expliquant les méthodes de "jquery abandonné", il montre qu'une méthode sur le site fait exactement ce que vous recherchez en javascript brut ( lien de référence en bas de l'article ). Assurez-vous d'enquêter sur les vulnérabilités de sécurité et les problèmes de compatibilité si vous avez l'intention de l'utiliser en production. Je ne le suis pas, donc je ne me suis jamais penché sur la question.

Fonction JS

var getURL = function (url, success, error) {
    if (!window.XMLHttpRequest) return;
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState === 4) {
            if (request.status !== 200) {
                if (error && typeof error === 'function') {
                    error(request.responseText, request);
                }
                return;
            }
            if (success && typeof success === 'function') {
                success(request.responseText, request);
            }
        }
    };
    request.open('GET', url);
    request.send();
};

Obtenez le contenu

getURL(
    '/views/header.html',
    function (data) {
        var el = document.createElement(el);
        el.innerHTML = data;
        var fetch = el.querySelector('#new-header');
        var embed = document.querySelector('#header');
        if (!fetch || !embed) return;
        embed.innerHTML = fetch.innerHTML;

    }
);

index.html

<!-- This element will be replaced with #new-header -->
<div id="header"></div>

views / header.html

<!-- This element will replace #header -->
<header id="new-header"></header>

La source n'est pas la mienne, je la référence simplement car c'est une bonne solution javascript vanille pour l'OP. Le code original vit ici: http://gomakethings.com/ditching-jquery#get-html-from-another-page

Darcher
la source

Bonne solution. Je préfère celui-ci à l'utilisation de jquery.

Delali

2

Aloha de 2018. Malheureusement, je n'ai rien de cool ou de futuriste à partager avec vous.

Je voulais cependant signaler à ceux qui ont commenté que la load()méthode jQuery ne fonctionne pas dans le présent essaient probablement d'utiliser la méthode avec des fichiers locaux sans exécuter un serveur Web local. Cela permettra de lancer le mentionné ci - dessus « origine croix » erreur, qui indique que l' origine transversale demande telle que celle fabriquée par le procédé de charge ne sont supportées que pour les régimes de protocole comme http, dataou https . (Je suppose que vous ne faites pas de demande d'origine croisée, c'est-à-dire que le fichier header.html est en fait sur le même domaine que la page à partir de laquelle vous le demandez)

Donc, si la réponse acceptée ci-dessus ne fonctionne pas pour vous, assurez-vous que vous exécutez un serveur Web. Le moyen le plus rapide et le plus simple de le faire si vous êtes pressé (et que vous utilisez un Mac sur lequel Python est préinstallé) serait de lancer un simple serveur http Python. Vous pouvez voir à quel point il est facile de le faire ici .

J'espère que ça aide!

marque
la source

Cependant, l'utilisation d'un serveur Web va à l'encontre du but, du moins pour moi, la raison d'utiliser uniquement Javascript est de le développer plus facilement.

Konrad Höffner

1

Il est également possible de charger des scripts et des liens dans l'en-tête. Je vais l'ajouter à l'un des exemples ci-dessus ...

<!--load_essentials.js-->
document.write('<link rel="stylesheet" type="text/css" href="css/style.css" />');
document.write('<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />');
document.write('<script src="js/jquery.js" type="text/javascript"></script>');

document.getElementById("myHead").innerHTML =
"<span id='headerText'>Title</span>"
+ "<span id='headerSubtext'>Subtitle</span>";
document.getElementById("myNav").innerHTML =
"<ul id='navLinks'>"
+ "<li><a href='index.html'>Home</a></li>"
+ "<li><a href='about.html'>About</a>"
+ "<li><a href='donate.html'>Donate</a></li>"
+ "</ul>";
document.getElementById("myFooter").innerHTML =
"<p id='copyright'>Copyright &copy; " + new Date().getFullYear() + " You. All"
+ " rights reserved.</p>"
+ "<p id='credits'>Layout by You</p>"
+ "<p id='contact'><a href='mailto:[email protected]'>Contact Us</a> / "
+ "<a href='mailto:[email protected]'>Report a problem.</a></p>";

<!--HTML-->
<header id="myHead"></header>
<nav id="myNav"></nav>
Content
<footer id="myFooter"></footer>

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

Samuel Omopariola
la source

0

une autre approche rendue disponible depuis que cette question a été posée pour la première fois est d'utiliser reactrb-express (voir http://reactrb.org ). Cela vous permettra de script en ruby côté client, en remplaçant votre code html par des composants react écrits en ruby.

Mitch VanDuyn
la source

1

op a demandé uniquement en utilisant html et javascript mais vous l'emmenez à utiliser ruby ..: D lol mais cool tool man ..

Meily Chhon

J'ai pris l'esprit de la question pour être - sans langage de modélisation du serveur. tout se compile en Javascript, donc je pense que cela répond à l'intention de la question.

Mitch VanDuyn

-1

Enregistrez le code HTML que vous souhaitez inclure dans un fichier .html:

Content.html

<a href="howto_google_maps.asp">Google Maps</a><br>
<a href="howto_css_animate_buttons.asp">Animated Buttons</a><br>
<a href="howto_css_modals.asp">Modal Boxes</a><br>
<a href="howto_js_animate.asp">Animations</a><br>
<a href="howto_js_progressbar.asp">Progress Bars</a><br>
<a href="howto_css_dropdown.asp">Hover Dropdowns</a><br>
<a href="howto_js_dropdown.asp">Click Dropdowns</a><br>
<a href="howto_css_table_responsive.asp">Responsive Tables</a><br>

Inclure le HTML

L'inclusion de HTML se fait à l'aide d'un attribut w3-include-html :

Exemple

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

Ajouter le JavaScript

Les inclusions HTML sont effectuées par JavaScript.

    <script>
    function includeHTML() {
      var z, i, elmnt, file, xhttp;
      /*loop through a collection of all HTML elements:*/
      z = document.getElementsByTagName("*");
      for (i = 0; i < z.length; i++) {
        elmnt = z[i];
        /*search for elements with a certain atrribute:*/
        file = elmnt.getAttribute("w3-include-html");
        if (file) {
          /*make an HTTP request using the attribute value as the file name:*/
          xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (this.readyState == 4) {
              if (this.status == 200) {elmnt.innerHTML = this.responseText;}
              if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
              /*remove the attribute, and call this function once more:*/
              elmnt.removeAttribute("w3-include-html");
              includeHTML();
            }
          } 
          xhttp.open("GET", file, true);
          xhttp.send();
          /*exit the function:*/
          return;
        }
      }
    }
    </script>

Appelez includeHTML () en bas de page:

Exemple

<!DOCTYPE html>
<html>
<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*make an HTTP request using the attribute value as the file name:*/
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }      
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
};
</script>
<body>

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

<script>
includeHTML();
</script>

</body>
</html>

Raaf003
la source

J'obtiens une

Créer des fichiers d'en-tête et de pied de page à inclure dans plusieurs pages html

Réponses: