Skip to main content
1 de 2
Luis S. Romero
  • 3.2k
  • 1
  • 5
  • 14

Armé lo siguiente que quizás te pueda ayudar, quizás no sea la mejor opción, podrías optar por algo como motores de templates como ejs, pug o nunjunks en Node por ejemplo, u otros recursos como React, Angular o Vue.. Pero puede ayudar para resolver el planteo.

Aquí va lo que armé:

Archivo index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div id="navbar"></div>

    <hr />

    <section>
      <h2>Contenido</h2>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, blanditiis.
      Ea aliquam voluptatibus eligendi fugit enim consectetur, soluta sed,
      reiciendis voluptas quisquam, cum obcaecati id assumenda? Cum velit rem
      ex?
    </section>

    <hr />

    <div id="footer"></div>

    <script src="importFiles.js"></script>
    <script>
      getComponent("navbar", "navbar.html");
      getComponent("footer", "footer.html");
    </script>
  </body>
</html>

En este archivo hay 3 partes importantes.

La primera son los DIVs con id navbar y footer.

<div id="navbar"></div>

y

<div id="footer"></div>

La segunda es el script src al archivo importFiles que es un script que a continuación detallaré, es la siguiente línea:

<script src="importFiles.js"></script>

La tercera es sencillamente un bloque de script donde se invoca a una función creada que recibirá 2 parámetros, el primero es el id del elemento donde se desea importar el contenido del otro archivo y el segundo es el nombre del archivo a importar, quedando de la siguiente manera:

 getComponent("navbar", "navbar.html");
 getComponent("footer", "footer.html");

Archivo importFiles.js

async function getComponent(container, fileName) {
  const response = await fetch(fileName);
  const fileToImport = await response.text();
  const targetContainer = document.getElementById(container);
  targetContainer.insertAdjacentHTML("beforeend", fileToImport);
}

Finalmente cree 2 archivos solo para prueba un archivo navbar.html con el siguiente contenido:

<div>
  <h1>Prueba Navbar</h1>
</div>

Y un archivo footer.html con el siguiente contenido:

<div>
  <p>Esto sería el footer</p>
</div>

Entre medio de ellos agregué una etiqueta section con un párrafo solo para simular una estructura básica de navbar, contenido y footer.

Todos los antes mencionados archivos están en la misma carpeta para simplificar, si esto cambia se deberán modificar las rutas.

Luis S. Romero
  • 3.2k
  • 1
  • 5
  • 14