Un iFrame, o marco en línea, es un elemento HTML que le permite incrustar otro documento HTML dentro de la página web actual.
¿Qué es un iFrame?
Un iFrame, abreviatura de Inline Frame, es un HTML Elemento que permite la incrustación de un documento HTML externo dentro de los límites de otro documento HTML. Básicamente, actúa como una ventana que puede mostrar contenido de una página web o recurso diferente, sin dejar de ser parte de la página web actual. Los iFrames se utilizan ampliamente para diversos fines, como la integración de videos, mapas interactivos, anuncios u otro contenido dinámico en un sitio web sin necesidad de que los usuarios abandonen la página que están viendo.
¿Cómo funciona un iFrame?
Un iFrame integra un documento HTML externo u otro contenido web dentro de la página web actual. A continuación, se ofrece una explicación paso a paso de cómo funciona este proceso:
- Insertar el elemento iFrame. El proceso comienza cuando el desarrollador agrega un etiqueta al HTML de la página web. Esta etiqueta incluye atributos como src, que especifica el Enlance del contenido externo que se va a incrustar y otros atributos opcionales como ancho, alto, borde del marco y permitir pantalla completa para controlar la apariencia y el comportamiento del iFrame.
- Solicitando la intención externa. Una vez que el usuario cada navegador carga la página web que contiene el iFrame, el navegador lee el atributo src en el etiqueta y hace una separada HTTP solicitud a la URL especificada para recuperar el contenido.
- Cargando el contenido externo. El navegador obtiene el contenido externo, que puede ser un documento HTML completo, un archivo multimedia o cualquier recurso web. El contenido se trata como un documento independiente dentro de la página web principal. El iFrame crea básicamente una miniventana del navegador dentro de la página web principal, cargando y mostrando el contenido como si fuera una página web independiente.
- Representando el contenido. El navegador muestra entonces el contenido dentro de los límites del iFrame. El contenido incrustado aparece como si fuera parte de la página web principal, pero funciona de forma independiente. La página principal y el contenido del iFrame no interactúan directamente, aunque comparten el mismo espacio visual.
- Interacción y funcionalidad. Los usuarios interactúan con el contenido dentro del iFrame tal como lo harían con cualquier página web. Por ejemplo, si el iFrame contiene un formulario, los usuarios pueden completarlo y enviarlo. El contenido incrustado puede incluir su propio JavaScript, CO, y otros recursos, ejecutados dentro del contexto iFrame, separados de la página principal.
- Ciclo de vida del documento independiente. El contenido incrustado dentro del iFrame tiene su propio ciclo de vida del documento. Esto significa que se carga, se ejecuta guiones, e interactúa con sus propios recursos independientemente de la página principal. Por ejemplo, si se vuelve a cargar la página principal, el contenido del iFrame también se volverá a cargar, pero su estado y comportamiento se administran por separado del documento principal.
- Seguridad y restricciones. Debido a los posibles riesgos de seguridad, los navegadores implementan varias restricciones en el contenido de iFrame. Por ejemplo, las políticas de origen cruzado impiden que los scripts de la página principal accedan al contenido dentro de un iFrame desde un navegador diferente. dominioAdemás, los desarrolladores utilizan encabezados y atributos de seguridad como arenero para limitar aún más lo que el contenido iFrame puede hacer, como deshabilitar scripts o evitar el envío de formularios.
Atributos de un iFrame
El Cada elemento de HTML tiene varios atributos que controlan su comportamiento, apariencia e interacción con el contenido que muestra. A continuación, se ofrece una explicación detallada de los atributos clave:
- origen. Este atributo especifica la URL del contenido externo que se va a incrustar en el iFrame. Es el atributo más esencial porque determina qué contenido se cargará en el iFrame. Por ejemplo, incrustará el contenido de "https://www.example.com" en el iFrame.
- anchura y altura. Estos atributos controlan el tamaño del iFrame en píxeles o porcentajes. Por ejemplo, creará un iFrame de 600 píxeles de ancho y 400 píxeles de alto.
- borde del marco. Este atributo especifica si el iFrame debe tener un borde. El valor 0 significa que no hay borde, mientras que 1 significa que el borde es visible. Este atributo ahora se considera obsoleto, y el CSS moderno es la forma preferida de aplicar estilo al borde del iFrame.
- desplazamiento. Este atributo controla la visibilidad de las barras de desplazamiento dentro del iFrame. Puede tomar tres valores: sí, no o automático. Sí obliga a que aparezcan las barras de desplazamiento, No las impide y Auto permite que aparezcan solo cuando sea necesario. Por ejemplo, evitará que aparezcan barras de desplazamiento incluso si el contenido es más grande que el iFrame.
- salvadera. Este poderoso atributo permite aplicar un conjunto de restricciones adicionales al contenido dentro del iFrame para mejorar la seguridad. Se puede utilizar para deshabilitar scripts, evitar el envío de formularios, bloquear el uso de complementos y restringir otros comportamientos potencialmente riesgosos. El valor de este atributo puede ser una lista de restricciones separadas por espacios, como allow-scripts, allow-forms, allow-same-origin, etc. Por ejemplo, Permitiría que los scripts se ejecuten dentro del iFrame pero con otras restricciones establecidas.
- permitir. El atributo allow especifica una política de funciones para el contenido del iFrame. Controla los permisos para cosas como el acceso a la cámara, la geolocalización, el modo de pantalla completa y más. Es una forma de otorgar o denegar explícitamente ciertas funciones del navegador para el contenido dentro del iFrame. Por ejemplo, permite que el contenido acceda a la geolocalización solo para el mismo origen y deshabilita el acceso a la cámara por completo.
- nombre. Este atributo asigna un nombre al iFrame, lo que puede resultar útil para dirigirlo con enlaces o scripts. Por ejemplo, un enlace con target="iframe_name" abrirá el contenido vinculado dentro del iFrame nombrado. Esto resulta especialmente útil en situaciones en las que existen varios iFrames en una página.
- fuentedoc. Este atributo le permite incrustar contenido HTML directamente dentro del iFrame en lugar de cargarlo desde una fuente externa. Es útil para incrustar pequeños fragmentos de contenido HTML sin la necesidad de un archivo independiente. Por ejemplo, Hello, world!"> Mostraría "¡Hola, mundo!" dentro del iFrame.
- política de referencia. Este atributo controla la cantidad de información de referencia que se debe enviar al obtener la URL de origen. Ayuda a gestionar las cuestiones de privacidad y seguridad relacionadas con los datos de referencia. Los valores pueden ser no-referrer, origin, strict-origin, etc., que determinan qué parte de la URL de la página original se comparte con el contenido incrustado.
- cargando. El atributo de carga especifica si el iFrame debe cargarse inmediatamente o con demora. Los valores pueden ser "ansiosos", que carga el iFrame lo antes posible, o "perezosos", que posponen la carga hasta que el iFrame esté cerca de la ventana gráfica, lo que mejora el rendimiento y la experiencia del usuario al reducir el tiempo de carga inicial.
- política de referencia. Este atributo establece la política de referencia para las solicitudes realizadas por el iframe, lo que afecta la cantidad de información sobre la página de referencia que se envía al contenido del iframe. Las opciones incluyen sin referencia, origen, mismo origen y origen estricto.
- c.s. El atributo csp (política de seguridad de contenido) permite al desarrollador especificar una política de seguridad de contenido específicamente para el contenido del iFrame. Esto aplica ciertas medidas de seguridad, como qué fuentes de contenido pueden cargarse, lo que puede evitar ciertos tipos de ataques como el cross-site scripting (XSS).
¿Para qué se utilizan los iFrames?
Los iFrames se utilizan para diversos fines en el desarrollo web, principalmente para incrustar contenido externo dentro de una página web y, al mismo tiempo, mantener un contexto independiente para ese contenido. A continuación, se muestran algunos casos de uso comunes:
- Incrustar videos. Los iFrames se utilizan ampliamente para insertar vídeos de plataformas como YouTube, Vimeo u otros servicios de alojamiento de vídeos. Esto permite a los usuarios ver vídeos directamente en un sitio web sin tener que salir de la página. El reproductor de vídeo incorporado, con todos los controles, se carga dentro del iFrame.
- Integración de mapas. Los iFrames se utilizan a menudo para integrar mapas interactivos de servicios como Google Maps u OpenStreetMap. Esto ofrece a los usuarios la posibilidad de ver e interactuar con los mapas directamente en la página web, lo que resulta especialmente útil para mostrar ubicaciones, direcciones y otros datos geográficos.
- Visualizar páginas web o documentos externos. Los iFrames permiten incluir páginas web completas o documentos de otros sitios web. Esto se utiliza habitualmente para mostrar contenido como condiciones de servicio, políticas de privacidad u otros documentos externos sin que los usuarios tengan que abandonar el sitio actual.
- Cargando widgets y complementos de terceros. Muchos servicios de terceros, como plataformas de redes sociales, herramientas de chat de atención al cliente y redes publicitarias, ofrecen widgets que se pueden integrar mediante iFrames. Esto permite que los sitios web integren funcionalidades como comentarios de Facebook, feeds X o soporte de chat en vivo sin una gran cantidad de tiempo. desarrollo backend.
- Alojamiento de anuncios publicitarios. Los iFrames se utilizan habitualmente para insertar anuncios en páginas web. Las redes publicitarias suelen proporcionar etiquetas de anuncios basadas en iFrames, que ayudan a aislar el contenido del anuncio del resto de la página para evitar conflictos entre el código del anuncio y el código de la página.
- Aislar contenido por razones de seguridad. Los iFrames se pueden utilizar para incrustar contenido de fuentes externas y, al mismo tiempo, mantenerlo aislado de los scripts y estilos de la página principal. Esto resulta especialmente útil para mantener los límites de seguridad, ya que evita que contenido potencialmente inseguro afecte a la página principal.
- Probar y previsualizar contenido. Los desarrolladores a menudo usan iFrames para probar o previsualizar el contenido de un entorno de desarrollo en un sitio en vivo. Esto permite realizar comparaciones y pruebas fácilmente sin tener que integrar completamente el contenido en el sitio.
- Mostrar contenido responsivo. Los iFrames se pueden utilizar para mostrar contenido adaptable que se ajuste a distintos tamaños de pantalla, como páginas web o aplicaciones adaptables. Esto resulta útil para garantizar que el contenido integrado sea accesible y visualmente consistente en todos los dispositivos.
- Incorporación de formularios y herramientas interactivas. Los iFrames se utilizan para incorporar formularios, encuestas, calculadoras y otras herramientas interactivas de fuentes externas. Esto permite que los sitios web ofrezcan funciones complejas sin tener que desarrollar estas herramientas desde cero.
- Incorporación entre dominios. Cuando es necesario incorporar contenido de un dominio diferente, los iFrames proporcionan un método para hacerlo manteniendo la separación de los contextos de origen. Esto es particularmente útil para el contenido alojado en un dominio diferente. server o dominio, lo que permite una gestión e implementación más sencillas.
Ejemplos de iFrame
A continuación se muestran dos ejemplos de iFrames en uso.
Ejemplo 1: Incorporación de un vídeo de YouTube
Este ejemplo demuestra cómo incrustar un vídeo de YouTube dentro de una página web usando un iFrame.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iFrame YouTube Example</title>
</head>
<body>
<h1>Watch this Video:</h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</body>
</html>
Explicación:
- El atributo src se establece en la URL del video de YouTube. En este caso, se trata de un video de ejemplo.
- Los atributos de ancho y alto definen el tamaño del reproductor de video.
- El atributo permitir especifica permisos para funciones como reproducción automática, cifrado medios y pantalla completa.
- El atributo allowfullscreen permite que el vídeo se vea en modo de pantalla completa.
Ejemplo 2: Incorporación de un mapa de Google
Este ejemplo muestra cómo incrustar un mapa de Google en una página web mediante un iFrame.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iFrame Google Map Example</title>
</head>
<body>
<h1>Our Location:</h1>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8354345096274!
2d144.95373631531565!3d-37.81720997975142!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!
1s0x6ad65d43f1a5d53b%3A0x1aaf3d5a5b64db5e!2sFederation%20Square!5e0!3m2!1sen!2sau!4v1617174192722!5m2!
1sen!2sau"
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</body>
</html>
Explicación:
- El atributo src contiene la URL proporcionada por Google Maps para insertar el mapa. La URL incluye parámetros específicos que determinan la ubicación y la configuración de visualización.
- Los atributos de ancho y alto definen el tamaño del mapa en la página web.
- La parte style="border:0;" elimina cualquier borde alrededor del mapa.
- El atributo allowfullscreen permite a los usuarios ver el mapa en modo de pantalla completa.
- El atributo loading="lazy" pospone la carga del mapa hasta que esté cerca de la ventana gráfica, lo que mejora el rendimiento de carga de la página.
¿Cómo utilizar iFrames?
Los siguientes pasajes explican cómo utilizar iFrames para aprovechar al máximo su experiencia de usuario.
Incrustar contenido externo
Para incrustar contenido externo en una página web, los desarrolladores suelen utilizar el Elemento HTML, que les permite incorporar recursos como vídeos, mapas o páginas web completas de otros dominios directamente en su sitio. El proceso implica especificar la fuente del contenido a través del atributo src en el Etiqueta que apunta a la URL del contenido externo. Se pueden usar atributos adicionales como ancho, alto y permitir para controlar la apariencia y el comportamiento del contenido incrustado, lo que garantiza que se adapte perfectamente al diseño de la página.
Al incorporar contenido externo de esta manera, los desarrolladores mejoran la funcionalidad y la interactividad de sus páginas web, ofreciendo a los usuarios una experiencia más rica sin necesidad de abandonar el sitio.
Cargar contenido dinámicamente
La carga dinámica de contenido dentro de un iFrame implica cambiar la fuente (src) del iFrame en respuesta a las interacciones del usuario u otros activadores, como botones o enlaces. Esto se puede lograr utilizando JavaScript, donde puedes manipular el atributo src del iFrame para cargar contenido nuevo sin recargar la página completa.
Por ejemplo, cuando un usuario hace clic en un botón, se puede ejecutar una función de JavaScript que actualiza el atributo src del iFrame, lo que hace que obtenga y muestre un nuevo documento HTML o recurso web. Este enfoque es particularmente útil para crear sitios web dinámicos. aplicaciones donde es necesario mostrar diferentes contenidos dentro de la misma área de la página en función de las acciones del usuario, mejorando la experiencia del usuario al proporcionar transiciones fluidas entre diferentes piezas de contenido.
Además, al aprovechar history.pushState API En combinación con el contenido iFrame dinámico, es posible mantener el historial del navegador, lo que permite a los usuarios navegar hacia adelante y hacia atrás a través del contenido cargado dinámicamente como si se tratara de cargas de páginas tradicionales.
Creación de marcos en línea
La creación de marcos en línea, comúnmente conocidos como iFrames, implica el uso de Elemento HTML para incrustar contenido externo directamente en una página web. Este elemento es versátil y permite a los desarrolladores insertar cualquier cosa, desde vídeos y mapas hasta páginas web completas o widgets interactivos en el contenido existente. Al especificar el atributo src, se define la URL del contenido que se va a incrustar, mientras que otros atributos como width, height y frameborder controlan la apariencia y el comportamiento del iFrame.
Los iFrames son particularmente útiles para integrar sin problemas contenido de terceros, lo que permite a los usuarios interactuar con recursos externos sin salir del sitio principal. Con atributos adicionales como sandbox y allow, los desarrolladores pueden ajustar la seguridad y la funcionalidad, lo que garantiza que el contenido integrado se comporte como se espera y, al mismo tiempo, mantiene la integridad y el rendimiento generales del sitio web.
Mejores prácticas para iFrames
Al utilizar iFrames en el desarrollo web, es fundamental seguir las prácticas recomendadas para garantizar que funcionen correctamente, mantengan la seguridad y brinden una buena experiencia de usuario. A continuación, se muestran algunas prácticas recomendadas para usar iFrames:
- Utilice el atributo sandbox para mayor seguridad. El atributo sandbox mejora la seguridad al aplicar restricciones al contenido dentro del iFrame. De forma predeterminada, los iFrames pueden presentar riesgos de seguridad, como secuencias de comandos entre sitios (XSS). El uso de sandbox limita las acciones que puede realizar el contenido incrustado, como ejecutar secuencias de comandos, enviar formularios o acceder al almacenamiento del navegador. También puede permitir de forma selectiva ciertas funciones, como secuencias de comandos o formularios, especificando valores de permiso adicionales.
<iframe src="https://example.com" sandbox="allow-scripts"></iframe>
- Especifique un atributo de título para la accesibilidad. Agregar un atributo de título descriptivo a su iFrame mejora la accesibilidad, en particular para los usuarios que dependen de lectores de pantalla. El atributo de título proporciona una breve descripción del contenido, lo que ayuda a los usuarios a comprender qué es el contenido incrustado.
<iframe src="https://example.com" title="Interactive map of our location"></iframe>
- Asegúrese de que el diseño sea responsivo. Los iFrames a veces pueden alterar la capacidad de respuesta de una página web, especialmente en pantallas pequeñas. Para garantizar que el contenido del iFrame se adapte correctamente a los distintos dispositivos, utilice CSS para que el iFrame sea responsivo. Puede lograrlo configurando el ancho y la altura en porcentajes o utilizando unidades de ventana gráfica, combinadas con restricciones de ancho y altura máximos.
iframe {
width: 100%;
height: auto;
max-width: 600px;
max-height: 400px;
}
- Evite el uso excesivo de iFrames. Si bien los iFrames son útiles, su uso excesivo genera tiempos de carga de página más lentos, riesgos de seguridad y una mala experiencia del usuario. Siempre que sea posible, considere métodos alternativos, como el uso de API o la incorporación de contenido directamente en la página en lugar de depender de varios iFrames.
- Establecer una política de referencia. El atributo referrerpolicy controla la cantidad de información de referencia que se envía cuando se carga el contenido de iFrame. Esto puede ayudar a proteger la privacidad del usuario y evitar que se comparta información confidencial con el contenido incrustado. Los valores comunes incluyen no-referrer, origin o strict-origin-when-cross-origin.
<iframe src="https://example.com" referrerpolicy="no-referrer"></iframe>
- Utilice el atributo de carga para mejorar el rendimiento. El atributo de carga ayuda a optimizar el rendimiento de la página al posponer la carga de los iFrames fuera de la pantalla hasta que sean necesarios (es decir, cuando estén cerca de la ventana gráfica). El valor lazy retrasa la carga, mientras que el valor anxious carga el iFrame inmediatamente.
<iframe src="https://example.com" loading="lazy"></iframe>
- Establecer permisos apropiados. El atributo allow especifica qué funciones puede utilizar el contenido de iFrame, como geolocalización, acceso a la cámara o reproducción automática. La configuración de permisos precisos limita las capacidades del contenido incrustado, lo que mejora la seguridad y la privacidad del usuario.
<iframe src="https://example.com" allow="geolocation; microphone; camera"></iframe>
- Considere políticas de origen cruzado. Los iFrames que cargan contenido de diferentes dominios pueden presentar problemas de seguridad. Implemente políticas de uso compartido de recursos de origen cruzado (CORS) en el server alojar el contenido del iFrame y utilizar X-Frame-Options o los encabezados Content-Security-Policy (CSP) para controlar qué sitios pueden incrustar su contenido en un iFrame. Esto ayuda a prevenir el secuestro de clics y otras vulnerabilidades de seguridad.
- Proporcionar contenido de respaldo. En caso de que el iFrame no se cargue o esté bloqueado, considere proporcionar contenido de respaldo dentro del etiqueta. Este contenido se mostrará si el iFrame no se puede cargar, ofreciendo una mejor experiencia de usuario.
<iframe src="https://example.com">
<p>Your browser does not support iFrames. Please visit <a href="https://example.com">this link</a> instead.</p>
</iframe>
Monitorizar el impacto en el rendimiento. Los iFrames pueden ralentizar el rendimiento de la página, especialmente si contienen contenido pesado, como vídeos o elementos interactivos. Controle periódicamente el impacto de los iFrames en el tiempo de carga de su página y optimice o cargue de forma diferida los iFrames que no sean visibles inmediatamente para el usuario.