En-tête / pied de page commun avec HTML statique

Question

Est-il décent de manière statique en HTML/XHTML pour créer des en-tête/pied de page des fichiers à afficher sur chaque page d'un site? Je sais que vous pouvez évidemment le faire avec PHP côté serveur serveur directives, mais est-il possible de le faire avec absolument pas de dépendances sur le serveur de couture tout en place pour vous?

Edit: Tous de très bonnes réponses, et a été ce que j'attendais. HTML est statique, période. Pas de véritable moyen de changer sans que quelque chose s'exécutant côté serveur ou côté client. J'ai trouvé que les Server Side includes semblent être ma meilleure option, car ils sont très simples et ne nécessitent pas de script.

Answer 1

La fonction load () de JQuery peut être utilisée pour inclure l’en-tête et le pied de page communs. Le code devrait être comme

 <script>
    $("#header").load("header.html");
    $("#footer").load("footer.html");
</script>
 

Vous pouvez trouver la démo ici

Answer 2

Depuis HTML ne dispose pas d'un "include" de la directive, je peux penser qu'à trois solutions de contournement

1. Images
2. Javascript
3. CSS

Un petit commentaire sur chacune des méthodes.

Des images peuvent être de série des images ou des iFrames. De toute façon, vous devrez spécifier une hauteur fixe, de sorte que cela peut ne pas être la solution que vous recherchez.

Javascript est un très vaste sujet et il y a sans doute existe de nombreuses façons comment on pourrait l'utiliser pour obtenir l'effet désiré. Du haut de ma tête toutefois, je pense, de deux façons:

1. Complet requête AJAX, qui demande à l'en-tête/pied de page et les place ensuite dans le bon endroit de la page;
2. <script type="text/jabascript" src="header.js"> qui a quelque chose comme ceci: document.write('My header goes here');

Le faire via le CSS serait vraiment un abus. CSS a l' content de la propriété qui vous permet d'insérer du code HTML de contenu, même si ce n'est pas vraiment destiné à être utilisé comme cela. Aussi, je ne suis pas sûr de prise en charge du navigateur pour cette construction.

Answer 3

Vous pouvez le faire avec javascript, et je ne pense pas que cela doit être que de fantaisie.

Si vous avez un header.js fichier et un footer.js.

Ensuite, le contenu de header.js pourrait être quelque chose comme

document.write("<div class='header'>header content</div> etc...")

Rappelez-vous à échapper à toutes les devis de caractères dans la chaîne que vous écrivez. Vous pouvez ensuite appeler à partir de votre statique des modèles avec

<script type="text/javascript" src="header.js"></script>

et de même pour l'footer.js.

Note: je ne recommande pas cette solution, c'est un hack et a un certain nombre d'inconvénients (mauvais pour le RÉFÉRENCEMENT et de l'ergonomie pour commencer) - mais il est conforme aux exigences de l'interlocuteur.

Answer 4

vous pouvez le faire facilement en utilisant jquery. pas besoin de php pour une tâche aussi simple. il suffit de l'inclure une fois dans votre page Web.

 $(function(){
    $("[data-load]").each(function(){
        $(this).load($(this).data("load"), function(){
        });
    });
})
 

Maintenant, utilisez data-load sur n'importe quel élément pour appeler son contenu à partir d'un fichier HTML externe. Il vous suffit d'ajouter une ligne à votre code HTML où vous souhaitez que le contenu soit placé.

Exemple

 <nav data-load="sidepanel.html"></nav>
<nav data-load="footer.html"></nav>