Incluir archivo HTML en otro usando HTML Import

HTML es el lenguaje estándar que forma una página web, pero no es fácil de ampliar o mantener. Necesitamos otro idioma como capa que nos permita generar HTML dinámicamente . HTML Import es un nuevo módulo estándar que intenta hacer que HTML sea más flexible.

HTML Import nos permite incluir un archivo HTML en otro archivo HTML. También podemos acceder y reutilizar el contenido interno. Esta es una nueva característica interesante que puede cambiar la forma en que construimos HTML en (tal vez) la próxima década.

En el momento de escribir esto, sin embargo, la importación HTML todavía está en la etapa Working Draft y Chrome (v36 y superior) es el único navegador que lo admite.

Sin embargo, tenga en cuenta que esta función está desactivada por deault. Para habilitar la importación de HTML en Chrome, vaya a la página chrome: // flags , active la opción Habilitar Importaciones HTML y luego reinicie Chrome . Comencemos experimentando con HTML Import.

Cómo usar la importación HTML

Incluir una plantilla HTML es similar a la forma en que incluimos una hoja de estilo, utilizamos etiqueta. Pero en lugar de usar rel=stylesheet, agregamos la etiqueta de link con rel=import . Como ejemplo, aquí incluiré una plantilla llamada template.html (le agregué algunas líneas de contenido ficticio).

Ahora, si ve la página web a través de Chrome DevTools en la pestaña Red, puede ver que el navegador (Chrome) carga la template.html .

Tenga en cuenta que el contenido del archivo que se importa no se agrega de manera instantánea al archivo HTML principal. Cuando vea el archivo HTML principal, no verá nada en este momento.

Reutilizando contenido

Para agregar el contenido en el archivo, necesitamos escribir algunas líneas de JavaScript. Normalmente, podemos poner una secuencia de comandos dentro de la etiqueta de la head . Pero en este caso particular, podemos agregar la secuencia de comandos dentro del cuerpo. Además, para que funcione este script siguiente, tenemos que ponerlo después de la rel=import . Tenemos que asegurarnos de que el contenido en rel=import haya sido cargado por completo por el navegador antes del script, para que el script pueda reconocer los elementos, el ID del elemento o las clases dentro de ese archivo.

Para comenzar, seleccionamos el archivo de plantilla con este código.

 var getImport = document.quearySelector ('link [rel = import]'); 

Esto seleccionará toda la etiqueta de link con rel=import . Puede importar múltiples archivos HTML y desea seleccionar solo una etiqueta de enlace específica, puede agregar el id a la etiqueta de enlace y seleccionarlo usando la id lugar de con el link[rel=import], como se muestra arriba.

Por ejemplo, suponiendo que importas archivos, así:

puedes reemplazar el código con:

 var getImport = document.querySelector ('# template-file'); 

Una vez que se selecciona el archivo, debemos seleccionar qué contenido adjuntaremos al archivo principal. Si tiene el contenido envuelto con un id="content", puede seleccionar el contenido de esta manera.

 var getContent = getImport.import.querySelector ('# contenido'); 

Ahora podemos agregar el contenido dentro del body usando el appendChild() JavaScript appendChild() .

 document.body.appendChild (document.importNode (getContent, true)); 

El contenido ahora debería aparecer en el archivo principal.

Usando la hoja de estilo

Al contrario de cómo anexamos contenido, la hoja de estilo que colocamos en el archivo importado afectará directamente al contenido principal. Aquí tenemos style.css agregado en el archivo de plantilla, que contiene el siguiente código que debería cambiar el color del párrafo a rojo.

 p {color: rojo; } 

El estilo tiene efecto inmediatamente, de la siguiente manera.

• Ver demostración
• Descargar Fuente

Pensamiento final

HTML Imports es útil para construir una página web modular y mantenible. Sin embargo, tenga en cuenta que este método, mediante la importación de HTML, puede no ser adecuado si el SEO es importante. El contenido se agrega con JavaScript, que es invisible para los rastreadores de motores de búsqueda . Use HTML Importar con moderación, solo para agregar contenido adicional o secundario a su página web.

Minificar y optimizar cualquier formato de imagen a JPG en línea con Jpeg.io

La herramienta gratuita Jpeg.io permite a cualquier persona convertir sus imágenes existentes en archivos JPEG optimizados sin ningún software . Simplemente cargue sus imágenes y el sitio web hace todo por usted en el back-end.No puede ver el código fuente, pero la optimización está activada por Kraken . Se s

(Consejos de tecnología y diseño)

Pruebe estas 25 excelentes aplicaciones y servicios sin pagar un centavo

El modelo comercial en línea ha cambiado drásticamente en los últimos tiempos. Ahora se basa en la satisfacción primero. No importa si alguien le recomendó una herramienta o una aplicación, nada mejor que probar primero la aplicación antes de decidir si desea suscribirse o no al servicio. ¡Eso es lo que amamos de Internet!Con est

(Consejos de tecnología y diseño)