1

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.

3
  • 1
    Algo así te podría servir es.stackoverflow.com/a/558436/301324 .Aunque la manera que creo "más correcta" sería usar web components
    – Yussef
    Commented el 23 sept. 2022 a las 8:36
  • 2
    Revisa <iframe>.
    – Sal
    Commented el 23 sept. 2022 a las 9:05
  • 1
    con apache httpd.apache.org/docs/current/es/howto/ssi.html#standard-footer si es por editar un fragmento en varios html podes usar un ide , o escribir un script para "pegar" diferentes archivos. aunque mepa que "si tengo que cambiar algo es un jaleo el ir cambiándolo en todas las páginas" es parte del aprendizaje y una buena intro a preprocesadores de html Commented el 23 sept. 2022 a las 12:22

2 respuestas 2

5

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>
2
  • 1
    Gracias, 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.
    – Susana
    Commented 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.
    – Hechi
    Commented el 23 sept. 2022 a las 12:58
3

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.