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

Question

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

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

Je voudrais utiliser javascript. Existe-t-il un moyen de le faire en utilisant uniquement html et JavaScript?

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

93

css html javascript jquery

demandé sur Manoj Kumar 2013-09-10 10:51:05

12 réponses

score 145 · Answer 1

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.html et footer.html, au même emplacement que index.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.

score 23 · Answer 2

Devez-vous utiliser la structure de fichier html avec JavaScript? Avez-vous envisagé D'utiliser PHP à la place afin que vous puissiez utiliser un objet PHP include simple?

Si vous convertissez les noms de fichiers de votre .pages html à .php-puis en haut de chacun de vos .pages php vous pouvez utiliser une ligne de code pour inclure le contenu de votre en-tête.php

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

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

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

Pas de JavaScript / Jquery ou supplémentaire fichiers inclus requis.

NB vous pouvez également convertir votre .fichiers html .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]

score 21 · Answer 3

J'ajoute des parties communes en tant qu'en-tête et pied de page en utilisant Le Côté Serveur inclut . Pas de HTML et pas de JavaScript est nécessaire. Au lieu de cela, le serveur web ajoute automatiquement le code inclus avant de faire autre chose.

Ajoutez simplement la ligne suivante où vous voulez inclure votre fichier:

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

score 9 · Answer 4

Essayez ceci,

<html>
<head>
<title></title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="header"></div><br />
<div id="content">
Main Content
</div><br />
<div id="footer"></div>
<script> 
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
</script> 
</body>
</html>

Vous pouvez trouver démo ici

score 8 · Answer 5

J'ai essayé ceci: Créez un en-tête de fichier .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>

Maintenant inclure en-tête.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.

score 6 · Answer 6

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:you@you.com'>Contact Us</a> / "
	+ "<a href='mailto:you@you.com'>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>

score 4 · Answer 7

J'ai travaillé en C#/Razor et comme je n'ai pas de configuration IIS sur mon ordinateur portable domestique, 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 "ditching jquery", il démontre une méthode sur le site fait exactement ce que vous recherchez dans plain Jane javascript (lien de référence au bas du post ). Assurez-vous d'enquêter sur les failles de sécurité et les problèmes de compatibilité si vous avez l'intention pour l'utiliser en production. Je ne le suis pas, donc je ne l'ai jamais regardé moi-même.

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();
};

Obtenir 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>

Vues / en-tête.html

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

La source n'est pas la mienne, je la fais simplement Référence car c'est une bonne solution JavaScript vanille à L'OP. le code Original vit ici: http://gomakethings.com/ditching-jquery#get-html-from-another-page

score 1 · Answer 8

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, de l'Opéra, 48.0, Opéra Néon 1.0, Navigateur Android 6.0, Chrome Mobile 61.0 et bloqueur de pub Navigateur 54.0
Testé KO dans Safari 10.1, Firefox 56.0, Bord 38.14 et IE 11

Plus d'informations de compatibilité dans 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 ce HTML5 Rocks post

score 0 · Answer 9

, 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:you@you.com'>Contact Us</a> / "
+ "<a href='mailto:you@you.com'>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>

score 0 · Answer 10

Une autre approche disponible depuis que cette question a été posée est d'utiliser reactrb-express (voir http://reactrb.org ) cela vous permettra de scripter en ruby du côté client, en remplaçant votre code html par des composants react écrits en ruby.

score 0 · Answer 11

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

Je voulais cependant souligner à ceux qui ont commenté que la méthode jQuery load() 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 lancera l'erreur "cross origin" mentionnée ci-dessus, qui spécifie que les demandes d'origine croisée telles que celles faites par la méthode load ne sont prises en charge que pour le protocole systèmes tels que le http, data, ou https. (Je suppose que vous ne faites pas une demande d'origine croisée réelle, c'est-à-dire l'en-tête.le fichier html est en fait sur le même domaine que la page à laquelle vous le demandez)

Donc, si la réponse acceptée ci-dessus ne fonctionne pas pour vous, assurez-vous que vous utilisez un serveur web. La façon la plus rapide et la plus simple de le faire si vous êtes pressé (et en utilisant un Mac, qui a Python pré-installé) serait de faire tourner un simple serveur http Python. Vous pouvez voir à quel point il est facile est de le faire ici .

J'espère que cela aide!

score 0 · Answer 12

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

Contenu.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 code 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 () au bas de la 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>

Las etiquetas más populares

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

12 réponses