R2D2 29 de julio de 2014 a las 06.44
   Imprimir artículo
elWebmaster.com

HTML “import”: importa HTML dentro de otro HTML


html5logowide

El elemento link es muy útil. Permite embeber fácilmente hojas de estilo (stylesheets) y scripts de Javascript que necesitamos en varios documentos. Sin embargo, no permite insertar archivos HTML. Para lograrlo, normalmente, estábamos limitados al uso de elemento “iframes” o del método Javascript “XMLHttpRequest()”.

Gracias al nuevo HTML5 import podemos usar ahora el elemento <link> para cargar un archivo HTML dentro de otro.

Una simple etiqueta en el header.

Insertar un archivo HTML con import es muy simple. Todo lo que necesitamos es usar el elemento <link>. Después añadir el valor “import” al atributo “rel”. Usando “href” añadimos la URL del archivo HTML, tal y como estamos habituados a hacer cuando añadimos hojas de estilo y scripts.

<link href="extern.html" rel="import" />

El archivo a importar puede tener además sus propios elementos “style” o “script” y serán importados también. Estos elementos pueden encontrarse definidos en la cabecera (header) o en el cuerpo del documento (body). Una de las ventajas de import en HTML5 es precisamente la de recoger todas las hojas de estilo y scripts que son necesarios en un determinado proyecto y añadirlo en un único archivo HTML, el cual será importado por todos los demás archivos del proyecto. De este modo se simplifica bastante el mantenimiento de los proyectos grandes.

Mientras el documento importado contenga hojas de estilo, los estilos serán directamente aplicados. Los estilos previamente definidos en el documento raíz serán, por lo tanto, reescritos. Para estar seguro de que no ocurre, hay que tener cuidado de la posición del link import en el documento raíz. También ocurre lo mismo para los scripts de Javascript, incluso los referidos externamente desde el documento importado serán cargados dentro del documento raíz.


Accediendo al contenido del archivo importado.

El resto de contenido del archivo importado será cargado, pero no mostrado. Los textos, imágenes y elementos multimedia no serán visibles mientras ellos no formen parte del árbol DOM del documento (raíz). Aún así se puede acceder a ellos con javaScript, mediante:


var extern = document.getElementsByTagName("link")[0].import;

En este ejemplo se asume que el primer elemento <link> carga un archivo HTML. Usando la propiedad de JavaScript “import”, asignamos la estructura de árbol completa del archivo importado a una variable llamada extern. Desde ahí seremos capaces de acceder a los nodos individuales del árbol mediante JavaScript.


var absatz = extern.getElementsByTagName("p")[0];

En este punto podemos acceder y leer todos los nodos del árbol DOM usando métodos comunes de JavaScript como por ejemplo “getElementsByTagName()”. Ahora seríamos capaces de añadirles sin problemas al árbol DOM de el documento raíz. Como ejemplo más radical, podríamos también remplazar el elemento <body> completamente por los contenidos del archivo importado. Esto es:


window.addEventListener("load", function() {
  document.getElementsByTagName("html")[0].replaceChild(
    extern.getElementsByTagName("body")[0],
      document.getElementsByTagName("body")[0]);}, false);

En el ejemplo se reemplaza el contenido del elemento <body> usando “replaceChild()”. Para asegurarnos de que la sustitución no empieza antes de que todos los elementos estén cargados, la función esta ligado a un event listener añadido vía “addEventListener()”.


Soporte de navegadores.

A día de hoy, sólo Chrome soporta el import de HTML5 y lo tienes que activar manualmente. Visitar “chrome://flags” desde la barra de direcciones, te dará acceso a todas las propiedades experimentales. Busca “Activate HTML Imports” y, bueno, activalo. Después del reinicio, el soporte de HTML5 import para Chrome estará disponible.

Usa la siguiente función para probar si el navegador soporta HTML5 import.


if ("import" in document.createElement("link")) {
  // HTML5 Imports are supported.
}

Los navegadores más viejos pueden hacer uso de polyfill, que emula HTML5 imports en aquellos navegadores que no lo soportan. De ese modo no hay necesidad de descartar HTML5 imports para los nuevos proyectos web.


Fuente original del artículo: noupe.com

Traducción realizada por elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder