Los Web Components han recorrido un largo camino desde que se introdujo el concepto por primera vez, pero uno de los aspectos de los componentes que realmente podría cambiar la forma del código de los sitios web es el Import En HTML.
Esta forma de trabajar nos permite importar documentos HTML a otros documentos HTML. Esto se logró con el uso de Ajax, pero el Import En HTML es un método más limpio.
Table of Contents
Compatibilidad Del Navegador
EL Import En HTML es una tecnología reciente y desde el momento que se escribio, sólo se admite en Chrome 31 y las siguientes versiones. Incluso, estára obligado a activar la función. Para ello tienes que ir a chrome://flags/ y habilitar «Enable HTML Imports» y luego reiniciar el navegador web y ya está listo para ser usado este web component. Afortunadamente también hay una Polyfill para Importaciones HTML que usted puede encontrar en Github.
Importaciones HTML son una forma de incluir y reutilizar documentos HTML en otros documentos HTML.
Usando HTML Import
Si se piensa en ello, estamos listos para usar las importaciones en nuestras hojas de estilo y archivos JS; esto no es más que otro tipo de importación y la sintaxis es similar a la forma en que importamos «normalmente», en la cabecera del documento:
[html]<link href="import/post.html" rel="import" />[/html]
Obteniendo El Contenido
Cuando se importa un archivo HTML que está diciendo al navegador que hay que ir a buscar el contenido de ese archivo para que se puede utilizar, pero no se muestra automáticamente en el documento; se necesita escribir algo de simple JavaScript para esto:
[js]var post = document.querySelector(‘link[rel="import"]’).import;[/js]
Esto hará que el contenido del archivo post.html sea importado en nuestra página, vamos a suponer que el archivo post.html se ve así:
[html]
<article class="post">
<h2>A Post Title</h2>
<p><span>Written by: Admin</span></p>
<p>If you run a business and want a professional first point of contact or just need a hand with some of the day to day to business tasks because things are getting a bit busy, then we can help.</p>
</article>
[/html]
Ahora tenemos que obtener el contenido de la página y seleccionar el artículo y colocarlo en nuestra página:
[js]
var post = document.querySelector(‘link[rel="import"]’).import;
var article = post.querySelector(‘.post’);
document.body.appendChild(article.cloneNode(true));
[/js]
En este caso importamos un contenedor en lugar de importar directamente en el body de manera que encaja perfectamente en nuestra aplicación . Es todoa una cuestión de elección y jugar un poco con el JS, para insertar el código HTML en un cierto elemento hay que hacer algo como lo siguiente:
[js]
var post = document.querySelector(‘link[rel="import"]’).import;
var article = post.querySelector(‘.post’);
var clone = document.importNode(article.content, true); document.querySelector(‘#container’).appendChild(clone);
[/js]
Como se puede ver, en este caso lo clonamos y añadimos luego a un elemento.
Finalmente
El Import En HTML nos ofrece una gran manera de construir mejores sitios web y organizar las aplicaciones, tiene una API fácil de manipular y cada vez mas se esta aplicando el soporte para el uso de este elemento.
You might also like
More from Desarrolladores
Para que usar un framework en PHP, pros y contras, ventajas y desventajas, porqué emplearlos
En artículos previos del blog hemos dialogado un poco sobre los frameworks en Php; sin embargo creo que aun no …
Qué es un framework en informática o programación
Qué es un framework en informática o programación. La palabra Framework es la combinación de dos palabras, es decir, Marco …
¿Cómo aumentar la memoria PHP? ¿Porqué hacerlo?
¿Cómo aumentar la memoria PHP? ¿Porqué hacerlo? Bueno voy a empezar al revés, diciendo porqué realizarlo, cuales son las razones …
1 Comment
buunas noches amigo juan gonzales lo felicito por su bloc muy interesante lo que espone