Hola a todos,
tengo un archivo html del que me gustaría modular y extraer diversas partes (cabecera, pie, barra de navegacion) a otros archivos independientes sin embargo no encuentro una solución para hacerlo en html puro (o js)
a ver si algun gurú me puede echar una maneja. gracias por adelantado.
P.D: No me sirven ni los iframes ni los objects, tampoco convertir a php para hacer un include de php . Por alguna extraña razón tampoco me está funcionando la función load de jquery.
No te entiendo bien del todo, quieres usar "una plantilla html" y coger esas diversas partes para luego modificarlas?
No lo puedes hacer en el propio html?
#2 Quizás no me he expresado bien. Tengo un archivo html completo (test.html) y quiero por ejemplo quitar el código del pie de página (porque le voy a usar en otras partes de la web) , copiarlo a otro archivo (pie.html) e incluirlo en el archivo test.html como una referencia ( como por ejemplo se haría en jsps <%@include file="pie.jsp" %> )
#3 y no es más facil añadirlo al css por ejemplo #pie { parametros } y luego simplemente llamarlo con la etiqueta <foother id="pie"> y así te sale en todos los html que tengas?
#5 Yo con php lo que solia hacer era un archivo header.inc y un footer.inc y en el resto de paginas la primera y ultima linea eran
<?php include(../inc/header.inc) ?>
<?php include(../inc/footer.inc) ?>
Esto lo que hace es renderizar todo el código (aunque la extension no sea .html) en el archivo que estas utilizando.
Pero para hacer esto solo con HTML no se puede, tienes que tirar de lenguaje de servidor. Con jQuery puedes usar la función .load(), pero para que funcione tienes que crearle el elemento o tenerlo creado y si en la cabecera/pie vas a tener eventos (tipo click, etc.) tendrás que referenciarlos a través de .on porque al añadir contenido dinamicamente no se añaden los handlers del tipo .click() etc.
si usas apache puedes hacerlo de forma sencilla configurando el servidor web con includes:
http://httpd.apache.org/docs/2.2/howto/ssi.html
o puedes usar algún framework javascript como angularjs que permite includes de html.
#9 Jodeeer lo de configurar el apache es un coñazo que te mueres haha, usando php o angular se hace con la cola.
#10 son 3 líneas, tardas menos que configurando apache con php correctamente o implementarlo en js. Que luego lo muevas a otro lado y no te tire ya es otro cantar.
No veo motivos para no usar PHP salvo que el servidor que tengas contratado sea tan basico que no de eso (o bien estes usando dropbox o algo por el estilo).
Puedes hacer algo asi
index.php **
include ("header.html");
include ("body.html");
include ("footer.html");
Me refiero a que solo el index sea php y todo lo demas sea con html.
Yo creo que tu problema es que no sabes realmente lo que quieres, ni lo que necesita.
Por lo que estás escribiendo, a ti lo que te hace falta es un motor de plantillas, o hacerte la plantilla a mano, no hay otra forma.
HTML es un lenguaje de marcado, nada mas.
Al final usaré php porque ahora mismo no tengo ni buscado el servidor donde alojar la web como para pensar en configurarlo (aunque para un futuro es una opcion a tener el cuenta). Además la web es muy muy básica y tampoco quiero comerme la cabeza.
Gracias a todos por las respuestas!
Mmm, revisate el load del jquery, debería de funcionarte.
index.html
<body>
<div id="header"></div>
<div id="footer"></div>
<script>
$(document).ready(function() {
$('#header').load('template/header.html');
$('#footer').load('template/footer.html');
});
</script>
</body>
header.html / footer.html
<p>Div Header/Footer</p>Salida:
Div Header
Div Footer
#18 Yo siempre he sido muy reacio a hacer esas cosas por el client side, pero si, es una opción #1.
Imagino que lo que quieres es dividir la estructura de una web (header, footer, sidebar) y llamarlas en cada página para no tener que editar 10 veces la cabecera y tal, no?
<object name="foo" type="text/html" data="header.html"></object>
<div class="contenido">Contenido</div>
<object name="foo2" type="text/html" data="footer.html"></object>
#20 La verdad es que generalmente no soy partidario de usar los objects ni los iframes, lo probé en mi código pero quedaba horrible.
#18 He tenido que cambiar de version de jquery porque la que estaba usando inexplicablemente hacia que no funcionase el load. Gracias por el código, creo quequeda mas legible que lo que estaba usando yo :o_o:
#19 Exacto, esa es la idea 
.
#21 Si solo quieres usar HTML, y no quieres usar ni objects, ni iframes, ni frames, creo que no te queda mas HTML para usar xD ( al menos que yo conozca )
Si le agregas jQuery, tienes el ejemplo de #18 , si lo haces via PHP, pues a base de includes, pero solo con HTML no se me ocurre nada más.
Suerte =)
#22 De momento probando me funciona con el jquery y con php, ahora mismo lo tengo montado como un sistema php pero creo que me quedaré con el jquery.
Gracias por la ayuda! 
