web-dev-qa-db-fra.com

Faire en sorte que les fichiers d'en-tête et de pied de page soient inclus dans plusieurs pages HTML

Je souhaite créer des pages d’en-tête et de pied de page communes à plusieurs pages HTML. 

J'aimerais utiliser javascript. Y a-t-il un moyen de faire cela en utilisant seulement HTML et JavaScript?

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

javascriptjqueryhtmlcss
100
Prasanth A R

Vous pouvez accomplir ceci 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 endroit 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.

157
Hariprasad Prolanx

Devez-vous utiliser la structure de fichier html avec JavaScript? Avez-vous envisagé d'utiliser PHP afin de pouvoir utiliser un objet simple PHP include?

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

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

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

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

Aucun fichier JavaScript/Jquery ou autres fichiers inclus requis.

NB: Vous pouvez également convertir vos fichiers .html en fichiers .php en utilisant les éléments suivants 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]
24
Sol

J'ajoute des parties communes comme en-tête et pied de page à l'aide de Server Side Includes . Aucun HTML et JavaScript n'est requis. Au lieu de cela, le serveur Web ajoute automatiquement le code inclus avant de faire quoi que ce soit.

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

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

J'ai essayé ceci: Créer un fichier header.html like

<!-- 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, incluez 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.

8
Asheesh Gupta

Vous pouvez aussi 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>

6
JustinM

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

J'ai construit un petit exemple: 

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

Plus d'informations sur la 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 cet article HTML5 Rocks post

5
JavierFuentes

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

Je suis tombé par hasard sur un site Web expliquant les méthodes d '"abandon de requête", il montre qu'une méthode sur le site fait exactement ce que vous cherchez en clair, javascript (lien de référence au 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 envisagez de les utiliser en production. Je ne le suis pas, donc je ne l'ai jamais examiné 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>

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 Vanilla pour le PO. Le code original vit ici: http://gomakethings.com/ditching-jquery#get-html-from-another-page

5
darcher

une autre approche disponible depuis que cette question a été posée est d’utiliser reactrb-express (voir http://reactrb.org ). Cela vous permettra d’écrire en Ruby côté client, en remplaçant votre code html par les composants rea écrits. en rubis.

0
Mitch VanDuyn

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

Cependant, je tenais à signaler à ceux qui ont fait remarquer que la méthode jQuery load() ne fonctionnait pas actuellement que nous essayions probablement de l’utiliser avec des fichiers locaux sans exécuter de serveur Web local. Cela provoquera l'erreur "cross Origin" mentionnée ci-dessus, qui spécifie que les requêtes d'origine croisée, telles que celles effectuées par la méthode load, ne sont prises en charge que pour les schémas de protocole tels que http, data ou https. (Je suppose que vous ne faites pas de demande d'origine croisée réelle, c'est-à-dire que le fichier header.html se trouve 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 utilisez un serveur Web. Le moyen le plus rapide et le plus simple de le faire si vous êtes dans une impasse (et en utilisant un Mac sur lequel Python est préinstallé) serait de faire tourner un simple serveur http Python. Vous pouvez voir à quel point il est facile de faire cela ici .

J'espère que ça aide!

0
Mark

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>
0
Samuel Omopariola