estoy con un proyecto para mi curso y como tiene varias páginas, me gustaría que el header y el footer fueran independientes, porque si tengo que cambiar algo es un jaleo el ir cambiándolo en todas las páginas. He visto varias soluciones por ahí pero todas usan php. ¿Hay alguna manera de hacerlo sin php? Es que el curso es de front-end(HTML,CSS y JavaScript) y php no lo hemos dado. Gracias.
2 respuestas
Deberás crear archivos html independientes tanto para el header
como para el footer
.
Una vez los tengas creados podrás incluirlos en cualquier página de la siguiente manera:
Con JQuery:
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#contenidoHeader").load("header.html");
});
</script>
</head>
<header>
<div id="contenidoHeader"></div>
</header>
<body>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto tenetur ratione mollitia non at quam assumenda aperiam unde, itaque totam, distinctio iusto. Saepe sint perspiciatis expedita aut nesciunt maiores. Amet!
</p>
</body>
</html>
Con Javascript:
<html>
<head>
<script>
function load_header() {
document.getElementById("contenidoHeader").innerHTML='<object type="text/html" data="header.html" ></object>';
}
</script>
</head>
<header>
<div id="contenidoHeader"></div>
<script>
load_header();
</script>
</header>
<body>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto tenetur ratione mollitia non at quam assumenda aperiam unde, itaque totam, distinctio iusto. Saepe sint perspiciatis expedita aut nesciunt maiores. Amet!
</p>
</body>
</html>
-
1Gracias, así es como quería hacerlo. Pero se me escapaba el jquery. Voy a revisar la documentación de jquery para enterarme bien. Entiendo que tengo que hacer una página html que sólo contenga el header y otra para el footer? Gracias de nuevo.– SusanaCommented el 23 sept. 2022 a las 12:43
-
1@Susana He editado la respuesta con otra posibilidad de hacerlo en javascript nativo, por si no hubieseis visto todavía JQuery.– HechiCommented el 23 sept. 2022 a las 12:58
Si queréis que el código este mas organizado y no este tan lioso colocando
<html>
<head>
<script>
function load_header() {
document.getElementById("contenidoHeader").innerHTML='<object type="text/html" data="src/build/header.html" ></object>';
}
</script>
</head>
<header>
<div id="contenidoHeader"></div>
<script>
load_header();
</script>
</header>
</html>
Aquí os dejo una sugerencia:
function load_header() {
document.getElementById("contenidoHeader").innerHTML='<object type="text/html" data="src/build/header.html" ></object>';
}
<html>
<head>
<script src="/src/js/app.js"></script> <!--La ruta del archivo puede ser la que sea, pero tiene que ser un archivo .js-->
</head>
<header>
<div id="contenidoHeader"></div>
<script>
load_header();
</script>
</header>
<body>
</body>
</html>
<iframe>
.