Archivo js repetido en varios html para encabezado
Estoy haciendo una página web, necesito hacer que mediante javascript repetir el mismo código fuente para la cabecera de la página. Como se podría hacer desde un archivo js.
1 Respuesta
Para realizar esta acción usaría ajax, específicamente con jquery y su método load.
Para comenzar haz tu archivo base e incluye la librería jquery.
Para el ejemplo he dejado un div llamado cuerpo y otro llamado header que está vacío para que reciba el contenido que deseas replicar.
La función load de jquery esta contenida en el método ready de la misma librería. Este método lo que hace es esperar a que se cargue toda la estructura del sitio antes de hacer ejecución de su cuerpo.
Index.html
<html>
<head>
<title>Include html</title>
<script src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$("#header").load("cabecera.html");
});
</script>
</head>
<body>
<div id='header'></div>
<div id='cuerpo'>
Este es el cuerpo
</div>
</body>
</html>He creado el archivo cabecera.html el cual no tiene mayor ciencia que el código que deseas incluir
<div id='cabecera'>
<b>Esta es la cabecera</div>
</div>Al ejecutar tendría que funcionar todo al instante.
Recuerda que el archivo index.html está preparado para que jquery.js y cabecera.html estén en el mismo directorio (al mismo nivel)
Hola me he descargado el archivo de jquery.com pero no consigo que salga la cabecera. Lo he puesto todo al mismo nivel. ¿De donde me descargo el jquery?
Un cordial saludo. Gracias.
Está bien el sitio de donde realizar la descarga. Ahora... ¿el archivo que descargaste lo renombraste a jquery.js como está en el script?
¿Me puedes dar el error javascript (o de otro tipo) que te arroja la consola?
no me da ningún error, es que no sale lo que tengo en cabecera.html
Puede haber problemas en la implementación.
Este código lo he probado y funciona, te recomiendo que revises:
Que el archivo jquery tenga el mismo nombre y que esté en la misma ubicación que está en el script
<script src='jquery.js'></script>
Que los elementos tengan el mismo nombre que los llamados en la definición (header, cabecera.html)
A la distancia solo eso podría aportar ya que por mi parte lo entregado está funcionando.
