Incluir un archivo html en otro archivo html

Un tutorial en el que veremos cómo incluir un texto de un archivo .html dentro de otro archivo .html

world_conect3

Escribiendo la guía para principiantes de openSUSE, me he encontrado con un pequeño contratiempo que no sabía cómo solucionar. Tenéis el código disponible en GitLab:

Esta guía está en html, y la parte del código del menú lateral se repetía en todas las páginas html. Si alguna vez quería cambiar algo en el menú, debería editar todos los archivos modificando la parte que quería, para que en todas las páginas se viese igual.

Lo más lógico es tener esa parte del código en un archivo diferente y llamarlo desde todos los archivos que necesite. Así si tengo que hacer un cambio en el menú, basta con hacerlo en un sólo archivo, y se verá reflejado en todos los sitios donde llame a ese menú.

El código original de la página desde la que he hecho mi traducción está en php, y en ese lenguaje basta con un sencillo “include” para incluir parte de un código en otro.

<!--?php include 'menu.php';?-->

Esto que en php es tan sencillo, parece que para código en html no lo es tanto. Revisé y probé muchas opciones que encontré buscando por la red.

Finalmente encontré una solución que se menciona en este enlace:

La respuesta que probé y me funcionó es en la que se inserta el código HTML mediante un documento JavaScript.

Para ello cree un archivo llamado menu.js donde metí el código de la parte común del menú que quería que apareciese en todas las páginas. Podéis ver el archivo en el siguiente enlace:

Tal como dicen en la respuesta que encontré deberá tener la siguiente estructura:

document.write('\
\
<h1>Añade tu código html por aqui</h1>
\
\
Cada final de línea debe acabar con un caracter como este '\', igual\
que lo hago en esta demostración.\
\
\
');

Hecho esto para incluir esa parte de código dentro de mis páginas html bastará hacerlo mediante:

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

En el código superior he dejado espacios en blanco entre el texto y los caracteres < y > para que se mostrase, ya que si no lo tomaba como código html el propio blog!

Y ya está, con eso incluyo una parte de código en html en otro archivo html. No soy programador ni nada de eso, por tanto desconozco si hay otra forma de hacerlo, o más simple. Esta fue la que me sirvió.

Puedes comprobarlo en la guía donde lo he aplicado:

ceros_unos1.png

————————————————————-

4 pensamientos en “Incluir un archivo html en otro archivo html

  1. No es la mejor solución ni de lejos. Es mala desde un punto de vista de seguridad y además ralentiza el navegador pues hay que reconstruir el DOM (volver a parsear el documento de nuevo). Mucha mejor opción es un iframe retocado para que no se muestren bordes y compartan estilos. Ahí incluso puedes activar el modo sandbox de los navegadores pero siendo ambos html tuyos no sería necesario.

    • Hola!
      La verdad es que no tenía ni idea de cómo hacerlo y encontré esta solución que punté en el blog para otra ocasión! 🙂
      La verdad es que no tengo ni idea de cómo hacer lo que me dices. La solución que encontré me sirvió para lo que quería hacer.

      Muchas gracias por la sugerencia y el comentario!! 🙂 un placer leerte por aquí 🙂

      Saludos!!

Me gustaría saber tu opinión. Deja un comentario (Puedes usar MarkDown)

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s