Encabezado / pie de página común con HTML estático

¿Existe una forma decente con HTML / XHTML estático para crear archivos de encabezado / pie de página comunes para que se muestren en cada página de un sitio? Sé que obviamente puede hacer esto con PHP o directivas del lado del servidor, pero ¿hay alguna manera de hacerlo sin absolutamente ninguna dependencia en el servidor que une todo para usted?

Editar: Todas muy buenas respuestas y fue lo que esperaba. HTML es estático, punto. No hay forma real de cambiar eso sin algo que se ejecute en el lado del servidor o en el lado del cliente. Descubrí que las inclusiones del lado del servidor parecen ser mi mejor opción, ya que son muy simples y no requieren secuencias de comandos.

Hay tres formas de hacer lo que quieras

Script del servidor

Esto incluye algo como php, asp, jsp ... Pero dijiste que no a eso

El lado del servidor incluye

Su servidor está sirviendo las páginas, así que ¿por qué no aprovechar las funciones integradas del lado del servidor ? Cada servidor tiene su propia forma de hacer esto, aprovéchalo.

El lado del cliente incluye

Esta solución hace que vuelva a llamar al servidor después de que la página ya se haya cargado en el cliente.

La función JQuery load () puede usarse para incluir encabezados y pies de página comunes. El código debería ser como

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

Puede encontrar la demostración aquí (archivada)

Dado que HTML no tiene una directiva "include", solo puedo pensar en tres soluciones

1. Marcos
2. Javascript
3. CSS

Un pequeño comentario sobre cada uno de los métodos.

Los marcos pueden ser marcos estándar o iFrames. De cualquier manera, tendrá que especificar una altura fija para ellos, por lo que es posible que esta no sea la solución que está buscando.

Javascript es un tema bastante amplio y probablemente existen muchas formas en que se puede usar para lograr el efecto deseado. Sin embargo, en la parte superior de mi cabeza puedo pensar en dos formas:

1. Solicitud AJAX completa, que solicita el encabezado / pie de página y luego los coloca en el lugar correcto de la página;
2. <script type="text/javascript" src="header.js"> que tiene algo como esto en él: document.write('My header goes here');

Hacerlo a través de CSS sería realmente un abuso. CSS tiene la contentpropiedad que le permite insertar contenido HTML, aunque en realidad no está destinado a usarse así. Además, no estoy seguro de la compatibilidad del navegador con esta construcción.

Puedes hacerlo con javascript, y no creo que deba ser tan elegante.

Si tiene un archivo header.js y un footer.js.

Entonces el contenido de header.js podría ser algo como

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

Recuerde escapar cualquier carácter de comillas anidado en la cadena que está escribiendo. A continuación, puede llamar a eso desde sus plantillas estáticas con

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

y de manera similar para footer.js.

Nota: No recomiendo esta solución, es un truco y tiene una serie de inconvenientes (deficiente para SEO y usabilidad solo para empezar), pero cumple con los requisitos del interrogador.

puedes hacer esto fácilmente usando jquery. no se necesita php para una tarea tan simple. solo incluye esto una vez en tu página web.

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

ahora use la carga de datos en cualquier elemento para llamar a su contenido desde un archivo html externo, solo tiene que agregar una línea a su código html donde desea que se coloque el contenido.

ejemplo

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

La mejor solución es utilizar un generador de sitios estáticos que tenga plantillas / soporte incluido. Yo uso Hammer para Mac, es genial. También está Guard, una joya rubí que monitorea los cambios de archivos, compila sass, concatena cualquier archivo y probablemente lo incluye.

La forma más sencilla de hacerlo es utilizando HTML simple.

Puede utilizar una de estas formas:

<embed type="text/html" src="header.html">

o:

<object name="foo" type="text/html" data="header.html"></object>

La forma más práctica es utilizar Server Side Include . Es muy fácil de implementar y ahorra mucho trabajo cuando tiene más de un par de páginas.

Marcos HTML, pero no es una solución ideal. Básicamente, accedería a 3 páginas HTML separadas a la vez.

Tu otra opción es usar AJAX, creo.

Podrías usar un corredor de tareas como gulp o gruñido.

Hay un paquete Gulp de NPM que incluye archivos sobre la marcha y compila el resultado en un archivo HTML de salida. Incluso puede transferir valores a sus parciales.

https://www.npmjs.com/package/gulp-file-include

<!DOCTYPE html>
<html>
  <body>
  @@include('./header.html')
  @@include('./main.html')
  </body>
</html>

un ejemplo de una tarea de tragar:

var fileinclude = require('gulp-file-include'),
    gulp = require('gulp');

    gulp.task('html', function() {
        return gulp.src(['./src/html/views/*.html'])
            .pipe(fileInclude({
                prefix: '@@',
                basepath: 'src/html'
            }))
            .pipe(gulp.dest('./build'));
    });

Puede intentar cargarlos a través del lado del cliente, así:

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
  </head>
  <body>

    <div id="headerID"> <!-- your header --> </div>
    <div id="pageID"> <!-- your header --> </div>
    <div id="footerID"> <!-- your header --> </div>

    <script>
      $("#headerID").load("header.html");
      $("#pageID").load("page.html");
      $("#footerID").load("footer.html");
    </script>
  </body>
</html>

NOTA: el contenido se cargará de arriba a abajo y reemplazará el contenido del contenedor en el que lo carga.

No. Los archivos HTML estáticos no cambian. Potencialmente, podría hacer esto con alguna solución elegante de Javascript AJAXy, pero eso sería malo.

Aparte de usar un sistema de plantillas local como muchos cientos que existen ahora en todos los lenguajes de scripting o incluso usar uno casero con sedo m4y enviar el resultado a su servidor, no, necesitaría al menos SSI.

La única forma de incluir otro archivo con HTML estático es un iframe. No lo consideraría una muy buena solución para encabezados y pies de página. Si su servidor no es compatible con PHP o SSI por alguna extraña razón, puede usar PHP y preprocesarlo localmente antes de cargarlo. Consideraría que es una mejor solución que los iframes.