¿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 incorporado) ha demostrado ser extremadamente eficaz. Se trata de una manera elegante de insertar contenido adicional en los documentos 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.

¿Para qué sirve la etiqueta iframe?

En principio, cada página web consiste en un único documento HTML. Para insertar otros elementos, como imágenes, vídeos u otros documentos, tienes que hacerlo sobre la base de un marco independiente que te permita incrustarlos. En el pasado, esto se lograba mediante marcos HTML estándar que en la actualidad 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, dependiendo del tamaño del contenido incrustado, el iframe permite que el elemento cuente con su propia barra de desplazamiento.

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 aplicaciones pueden añadirse mediante iframes, así como documentos HTML personalizados.

Estructura del iframe

Los iframes se introducen en el código HTML con la etiqueta iframe.

<iframe>...</iframe>

Para completar el iframe correctamente, hay que especificar también los siguientes atributos:

  • src: fuente del contenido incrustado, en formato URL.
  • width: ancho del marco, que se puede especificar en píxeles o en porcentaje.
  • height: altura del marco, que se puede especificar en píxeles o en porcentaje.
  • 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 compatibles desde que se utiliza iframe en HTML5. Por ello, en su lugar, se debe recurrir a soluciones del CSS para las siguientes funciones:

  • scrolling: desplazamiento autónomo del iframe.
  • align: alineación del iframe.
  • frameborder: creación de un marco visible para el iframe.
  • longdesc: descripción larga del iframe.
  • marginwidth: ancho de los márgenes izquierdo y derecho.
  • marginheight: 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 alternativo, que solo se mostrará en caso de que el navegador del usuario no sea compatible con el iframe. Normalmente, esto ya no debería suceder, porque las últimas versiones de todos los navegadores habituales reconocen esta tecnología.

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

<iframe src="http://ejemplo.org/demo.html" height="400" width="800" name="demo">
    <p>Su navegador no es compatible con iframes</p>
</iframe>

En este ejemplo, hemos insertado un documento HTML que se encuentra en otra página web, pero también es posible incrustar documentos HTML que tengamos almacenados en nuestro propio servidor web. En este caso, solo tienes que introducir el nombre del archivo y, si el documento no se encuentra en la misma carpeta, también la ruta.

Consejo

Si quieres insertar un vídeo de YouTube en tu página web, también puedes hacerlo mediante el iframe. La propia plataforma ofrece el código correspondiente en la página de cada vídeo.

Para que el iframe resulte visualmente atractivo, es necesario incorporar 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 personalizar el diseño para adaptarlo a nuestra propia página.

Ventajas e inconvenientes del iframe

El iframe es perfecto para incorporar elementos de fuentes externas a nuestra web: en lugar de enviar al usuario a otro sitio, este puede seguir navegando cómodamente 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 independientemente 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 disposición.

Sin embargo, el iframe va perdiendo cada vez más adeptos debido a ciertos inconvenientes. De hecho, los motores de búsqueda no tratan los elementos incrustados de manera adecuada, lo que puede afectar la optimización para los motores de búsqueda y, por lo tanto, también el posicionamiento de la página. Aún más graves son los riesgos de seguridad relacionados con el iframe: incrustar contenido externo puede perjudicar 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 propietario del sitio sea consciente de ello.

Además, en los últimos años, el uso del iframe se ha cuestionado una y otra vez debido a las leyes de protecció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 plataforma.

En resumen

Sin duda, el iframe va a seguir utilizándose a largo plazo en el desarrollo de páginas web. No obstante, en muchos casos, podemos lograr los mismos resultados mediante otras tecnologías como CSS o JavaScript, que a menudo son más recomendables.

¿Le ha resultado útil este artículo?