logo

Cómo utilizar el iFrame en el HTML de tu sitio web

Tech 
17/09/2024

El desarrollo web necesita constantemente de herramientas que puedan aumentar la flexibilidad a la hora de presentar información procedente de otros dominios o aplicaciones. El iFrame es un componente con esta finalidad, y hoy conoceremos qué es en detalle, sus ventajas y desventajas y cómo se puede colocar en una página web.

Los iFrames permiten integrar datos y herramientas externas y, por ello, puede facilitar la visualización y el análisis de datos en tiempo real. Si te gusta el campo de la gestión de la información, puedes ampliar tus conocimientos y especializarte con el Máster en Business Intelligence y Data Management

¿Qué es el iFrame y para qué se utiliza?

Iframe es una abreviatura de inline frame, que es un elemento HTML que permite insertar otro documento de este tipo dentro de la estructura de una página web. Dicho de otra manera, podemos usar un iFrame para mostrar una página web completa, un documento o una parte de contenido de una fuente externa dentro de nuestro sitio. Lo interesante es que el contenido incrustado puede provenir de otro dominio y ser completamente independiente del sitio principal. 

Es muy práctico en el frontend development, y sus usos principales del iFrame en HTML son los siguientes:

  • Mostrar vídeos de plataformas como YouTube o Vimeo.
  • Incrustar mapas de Google Maps.
  • Integrar formularios o herramientas externas, como encuestas o aplicaciones de terceros.
  • Mostrar contenidos interactivos, como documentos o presentaciones de Google Docs o Microsoft Office.
  • Insertar publicidad de redes de anuncios que ofrecen su contenido en este formato.

Gracias a su versatilidad, la herramienta iFrame permite a un programador full stack personalizar la experiencia del usuario y mostrar información relevante sin que este tenga que dirigirse a una nueva página. Es decir, que podemos ofrecer acceso a recursos externos sin salir de la navegación de un sitio web. 

 

iFrame

 

Ventajas y desventajas de utilizar el iFrame en el HTML de una página

Como cualquier otro elemento, hay aspectos positivos y negativos dentro del uso del iFrame en las etiquetas HTML. A continuación, vamos a ver cuáles son:

Ventajas

- Facilidad de integración de contenido externo. La mayor ventaja es la posibilidad de mostrar contenido externo sin necesidad de descargar o modificar ese contenido. Por ejemplo, para mostrar un vídeo de YouTube, no hará falta descargar el vídeo ni tampoco tener en cuenta la compatibilidad del formato. Simplemente, se inserta el iFrame y el vídeo se carga desde la plataforma de YouTube. Supone un ahorro de tiempo y de recursos importante.

- Aislamiento del contenido. Se aísla el contenido incrustado del resto del sitio. Es decir, que si la página dentro del iFrame contiene código malicioso o errores, no afectará al funcionamiento de la página principal. Por tanto, si hay cambios en el contenido externo, no afectarán al diseño o la funcionalidad del sitio web. 

- Flexibilidad en el diseño. Los iFrames permiten a los desarrolladores insertar contenido en la maquetación web, sin tener que diseñarlo desde cero. Por ejemplo, para mostrar un mapa interactivo o un formulario de un servicio de terceros, no hay que replicar el diseño exacto en la página.

- Mantener a los usuarios en la web. Mejora la retención de los usuarios y el tiempo de permanencia en la página.

Desventajas

- Problemas de rendimiento. El tiempo de carga de la página se puede ver ralentizado cuando hay varios iFrames. Cada uno necesita una solicitud adicional al servidor y puede perjudicar al tiempo total de carga, con la consecuente repercusión negativa en el posicionamiento SEO. 

- Compatibilidad limitada con dispositivos móviles. Además de los problemas para mostrar el contenido en estos dispositivos, este puede no ser siquiera adaptable o responsive, así que la usabilidad se ve afectada. 

- Problemas de seguridad. Aunque el iFrame aísla el contenido externo, se recomienda usar prácticas de seguridad como el uso de la política de contenido seguro (CSP). 

- Dependencia de terceros. Si el creador del contenido sufre caídas o lo elimina, quedarán espacios vacíos o fallos en el sitio web que afectarán a la experiencia del usuario.

 

iFrame

 

Cómo insertar un iFrame en tu sitio web

Para insertar el iFrame en una web, solo hay que usar la etiqueta <iframe> dentro del código HTML y especificar la URL del contenido que se desea mostrar. Un ejemplo de iFrame sería el siguiente: “<iframe src="https://www.ejemplo.com" width="600" height="400" frameborder="0" allowfullscreen></iframe> “.

Los atributos usados serían:

  • SRC. Es el que define la URL de la página o recurso que se incrustará dentro del iFrame. En el ejemplo anterior, se está incrustando la página "https://www.ejemplo.com".
  • Width y height. Estos atributos definen el ancho y alto del iFrame. Se pueden ajustar para que vayan acorde con el espacio disponible en el diseño de la web.
  • Frameborder. Este atributo define si se muestra o no un borde alrededor del iFrame. El valor "0" lo desactiva.
  • Allowfullscreen. Significa que el contenido se visualizará en pantalla completa, si es aplicable. Es muy útil, por ejemplo, cuando se incrustan vídeos.
  • Sandbox. Agrega restricciones de seguridad al contenido dentro del iFrame. Por ejemplo, se puede  impedir que el contenido incrustado ejecute scripts o que acceda a ciertas funcionalidades del navegador.

Las herramientas disponibles para mejorar la experiencia de usuarios con múltiples y cada vez más avanzadas. Mantenerse al tanto y saber implementarlas en una empresa es necesario para ser competitivos. Si quieres ampliar o actualizar tus conocimientos en innovación, consulta nuestra oferta informativa. 



© Instituto de Innovación Digital de las Profesiones. Planeta Formación y Universidades. Todos los derechos reservados.
Por cualquier consulta, escríbanos a info@inesdi.com