iFrame

Un iFrame (inline frame) es un elemento HTML que incrusta una página web dentro de otra. Definido por la etiqueta `<iframe>`, crea una ventana rectangular independiente dentro de tu página que carga y muestra contenido desde una URL separada. El contenido incrustado mantiene su propio contexto de documento — con DOM, estilos y scripts separados — aislado de la página anfitriona. Los iFrame se utilizan ampliamente para incrustar vídeos, mapas, formularios, pasarelas de pago y widgets interactivos sin que la página anfitriona tenga que manejar el código o estilo de ese contenido directamente.

Para los editores digitales, los iFrame proporcionan la forma más sencilla y universal de colocar un [flipbook](/glossary/flipbook) interactivo o un visor de documentos directamente en un sitio web existente. Los visitantes pueden navegar por la publicación sin salir de la página, manteniéndolos en tu sitio en lugar de redirigirlos a un enlace de terceros. Esto mejora el tiempo en la página, reduce las [tasas de rebote](/glossary/bounce-rate) e integra la experiencia de lectura en tu diseño existente. Dado que los iFrame son una función HTML nativa compatible con todos los navegadores modernos, funcionan en WordPress, Shopify, Squarespace, sitios personalizados y prácticamente cualquier CMS.

FlipLink genera un [código de inserción](/glossary/embed-code) iFrame listo para usar para cada [flipbook](/glossary/flipbook) y documento publicado. Copias el fragmento desde tu panel de control de FlipLink y lo pegas en el HTML de tu sitio web, editor de CMS o constructor de páginas de destino. El iFrame carga el visor completo de FlipLink — incluyendo [animaciones de cambio de página](/glossary/page-flip-animation), [botones CTA](/glossary/call-to-action-cta), [formularios de captura de leads](/glossary/lead-capture) y [seguimiento de análisis](/glossary/analytics-dashboard) — dentro de las dimensiones que especifiques. La [inserción responsiva](/features/sharing-and-distribution) de FlipLink asegura que el iFrame se adapte automáticamente a cualquier tamaño de pantalla. FlipLink también ofrece una opción de [imagen clicable incrustada](/features/clickable-image-embed) como alternativa ligera que enlaza al visor completo.

Una inserción iFrame utiliza esta estructura HTML básica: ```html <iframe src="https://go.fliplink.me/your-flipbook" width="100%" height="600" frameborder="0" allowfullscreen> </iframe> ``` Atributos clave que afectan el comportamiento: - **`src`** — La URL del contenido a incrustar. FlipLink proporciona esta URL para cada publicación. - **`width` / `height`** — Controla el área visible. El código de inserción responsivo de FlipLink usa anchos porcentuales para diseños fluidos. - **`sandbox`** — Restringe lo que el contenido incrustado puede hacer (ej. bloquear formularios, scripts o ventanas emergentes). El código de FlipLink está configurado para permitir las interacciones necesarias para la funcionalidad completa. - **`loading="lazy"`** — Difiere la carga del iFrame hasta que el usuario se desplace cerca, mejorando el rendimiento de carga inicial de la página. - **`allow`** — Especifica permisos de funciones como el modo de pantalla completa, que FlipLink utiliza para una lectura inmersiva.

Los iFrame introducen un límite de confianza entre la página anfitriona y el contenido incrustado. Comprender el modelo de seguridad te ayuda a incrustar contenido de manera segura: - **Same-origin policy** — Los navegadores impiden que la página anfitriona acceda al DOM de un iFrame de origen cruzado, y viceversa. Tu sitio web no puede leer ni manipular los componentes internos del visor de FlipLink, y el visor incrustado no puede acceder a las cookies o datos de tu sitio. - **[Lista blanca de dominios](/glossary/domain-whitelisting)** — FlipLink te permite restringir qué dominios pueden incrustar tus publicaciones, evitando que sitios no autorizados muestren tu contenido en sus propios iFrame. - **Content Security Policy (CSP)** — Si tu sitio web usa encabezados CSP estrictos, es posible que necesites agregar el dominio de FlipLink a tu directiva `frame-src` para permitir que el iFrame se cargue. - **Protección contra clickjacking** — FlipLink establece encabezados `X-Frame-Options` y CSP apropiados para controlar dónde puede incrustarse su visor, mientras permite tus dominios autorizados.

**"Los iFrame son malos para el SEO."** Los motores de búsqueda pueden seguir enlaces dentro de iFrame e indexar el contenido incrustado por separado, pero el contenido no contribuye al ranking SEO de la página anfitriona. Para flipbooks, esto no es una preocupación — el valor SEO reside en el contenido, encabezados y metadatos propios de tu página, mientras el flipbook sirve como herramienta de engagement. **"Los iFrame siempre ralentizan mi página."** Un iFrame en sí mismo agrega una sobrecarga mínima. Los problemas de rendimiento surgen de lo que el iFrame carga. Usar `loading="lazy"` asegura que el flipbook solo se cargue cuando el usuario se desplace hasta él, manteniendo rápida la carga inicial de la página. **"Los iFrame son tecnología obsoleta."** Si bien algunos usos legacy de los iFrame (como construir diseños de página) están efectivamente obsoletos, la inserción basada en iFrame sigue siendo el estándar para widgets de terceros, formularios de pago y contenido interactivo. Todas las plataformas principales — YouTube, Google Maps, Stripe y FlipLink — usan iFrame para la inserción.

Un iFrame es el método estándar y seguro para incrustar contenido interactivo como flipbooks en cualquier sitio web. Proporciona funcionalidad completa mientras mantiene el contenido incrustado aislado del código y los estilos de tu página anfitriona.