¿Qué es el iframe de HTML?

¿Quieres incrustar contenido externo en tu propia página web? Para ello, el iframe (del inglés inline frame, o marco in­co­r­po­ra­do) ha de­mo­s­tra­do ser ex­tre­ma­da­me­n­te eficaz. Se trata de una manera elegante de insertar contenido adicional en los do­cu­me­n­tos HTML. En el mejor de los casos, el usuario de la página ni siquiera se da cuenta de que el contenido procede de otra fuente. Te contamos cómo integrar el iframe en HTML.

En principio, cada página web consiste en un único documento HTML. Para insertar otros elementos, como imágenes, vídeos u otros do­cu­me­n­tos, tienes que hacerlo sobre la base de un marco in­de­pe­n­die­n­te que te permita in­cru­s­tar­los. En el pasado, esto se lograba mediante marcos HTML estándar que en la ac­tua­li­dad ya no se utilizan. En su lugar, se recurre a la etiqueta iframe. El inline frame crea un espacio dentro de la página donde los elementos añadidos operan de manera autónoma. De esta manera, por ejemplo, de­pe­n­die­n­do del tamaño del contenido in­cru­s­ta­do, el iframe permite que el elemento cuente con su propia barra de de­s­pla­za­mie­n­to.

Por lo general, el iframe se utiliza para incrustar objetos de otros sitios web en una página, como vídeos de YouTube o mapas de Google Maps. Incluso algunos plugins de redes sociales o ciertas apli­ca­cio­nes pueden añadirse mediante iframes, así como do­cu­me­n­tos HTML pe­r­so­na­li­za­dos.

Los iframes se in­tro­du­cen en el código HTML con la etiqueta iframe.

Para completar el iframe co­rre­c­ta­me­n­te, hay que es­pe­ci­fi­car también los si­guie­n­tes atributos:

• src: fuente del contenido in­cru­s­ta­do, en formato URL.
• width: ancho del marco, que se puede es­pe­ci­fi­car en píxeles o en po­r­ce­n­ta­je.
• height: altura del marco, que se puede es­pe­ci­fi­car en píxeles o en po­r­ce­n­ta­je.
• name: nombre que el propio usuario asigna al iframe.
• sandbox: incorpora ciertas medidas de seguridad en el iframe.
• srcdoc: contiene el código HTML que se mostrará en el iframe.

Además de estos atributos válidos, existen otros que ya no son co­m­pa­ti­bles desde que se utiliza iframe en HTML5. Por ello, en su lugar, se debe recurrir a so­lu­cio­nes del CSS para las si­guie­n­tes funciones:

• scrolling: de­s­pla­za­mie­n­to autónomo del iframe.
• align: ali­nea­ción del iframe.
• fra­me­bo­r­der: creación de un marco visible para el iframe.
• longdesc: de­s­cri­p­ción larga del iframe.
• ma­r­gi­n­wi­d­th: ancho de los márgenes izquierdo y derecho.
• ma­r­gi­nhei­ght: ancho de los márgenes superior e inferior.
• vspace: espacio vertical alrededor del iframe.

El contenido del iframe en sí, además de una parte del diseño, solo puede definirse por medio de los atributos. De hecho, todo el texto que se coloque entre la etiqueta de inicio y la de cierre no será contenido, sino texto al­te­r­na­ti­vo, que solo se mostrará en caso de que el navegador del usuario no sea co­m­pa­ti­ble con el iframe. No­r­ma­l­me­n­te, esto ya no debería suceder, porque las últimas versiones de todos los na­ve­ga­do­res ha­bi­tua­les reconocen esta te­c­no­lo­gía.

Un iframe de HTML válido podría tener este aspecto:

En este ejemplo, hemos insertado un documento HTML que se encuentra en otra página web, pero también es posible incrustar do­cu­me­n­tos HTML que tengamos al­ma­ce­na­dos en nuestro propio servidor web. En este caso, solo tienes que in­tro­du­cir el nombre del archivo y, si el documento no se encuentra en la misma carpeta, también la ruta.

Para que el iframe resulte vi­sua­l­me­n­te atractivo, es necesario in­co­r­po­rar el lenguaje CSS. No obstante, en la mayoría de los casos, solo puede diseñarse el marco en sí mismo. Si el contenido procede de una fuente externa, rara vez podremos pe­r­so­na­li­zar el diseño para adaptarlo a nuestra propia página.

El iframe es perfecto para in­co­r­po­rar elementos de fuentes externas a nuestra web: en lugar de enviar al usuario a otro sitio, este puede seguir navegando có­mo­da­me­n­te por nuestra página. De este modo, aumenta mucho la facilidad de uso. Además, incrustar el iframe puede tener una ventaja técnica, porque su contenido se carga in­de­pe­n­die­n­te­me­n­te del resto de la web. De esta manera, aunque aún no se hayan cargado todos los elementos de la página, el usuario ya tiene el contenido del iframe a su di­s­po­si­ción.

Sin embargo, el iframe va perdiendo cada vez más adeptos debido a ciertos in­co­n­ve­nie­n­tes. De hecho, los motores de búsqueda no tratan los elementos in­cru­s­ta­dos de manera adecuada, lo que puede afectar la op­ti­mi­za­ción para los motores de búsqueda y, por lo tanto, también el po­si­cio­na­mie­n­to de la página. Aún más graves son los riesgos de seguridad re­la­cio­na­dos con el iframe: incrustar contenido externo puede pe­r­ju­di­car el sistema o, incluso, al propio usuario. Por ejemplo, el contenido del iframe puede guardar un plugin malicioso o esconder una amenaza de phishing sin que el pro­pie­ta­rio del sitio sea co­n­s­cie­n­te de ello.

Además, en los últimos años, el uso del iframe se ha cue­s­tio­na­do una y otra vez debido a las leyes de pro­te­c­ción de datos. A menudo, los iframes que se insertan en las redes sociales acceden a algunos datos del usuario, aunque este no pulse los botones de “Me gusta” o “Compartir” o, incluso, ni siquiera haya iniciado sesión en la pla­ta­fo­r­ma.