iFrame

Un iFrame (cadre en ligne) est un élément HTML qui intègre une page web à l'intérieur d'une autre. Défini par la balise `<iframe>`, il crée une fenêtre rectangulaire indépendante au sein de ta page, qui charge et affiche du contenu provenant d'une URL distincte. Le contenu intégré conserve son propre contexte de document — avec un DOM, des styles et des scripts séparés — isolé de la page hôte. Les iFrames sont largement utilisés pour intégrer des vidéos, des cartes, des formulaires, des passerelles de paiement et des widgets interactifs sans que la page hôte ait à gérer directement le code ou la mise en forme de ce contenu.

Pour les éditeurs numériques, les iFrames offrent le moyen le plus simple et le plus universel de placer un [flipbook](/glossary/flipbook) interactif ou une visionneuse de documents directement sur un site web existant. Les visiteurs peuvent parcourir la publication sans quitter la page, ce qui les garde engagés sur ton site plutôt que de les rediriger vers un lien tiers. Cela améliore le temps passé sur la page, réduit le [taux de rebond](/glossary/bounce-rate) et intègre l'expérience de lecture de façon fluide dans ton design existant. Comme les iFrames sont une fonctionnalité HTML native prise en charge par tous les navigateurs modernes, ils fonctionnent sur WordPress, Shopify, Squarespace, les sites codés sur mesure et pratiquement n'importe quel CMS.

FlipLink génère un [code d'intégration](/glossary/embed-code) iFrame prêt à l'emploi pour chaque flipbook et document publié. Tu copies l'extrait d'intégration depuis ton tableau de bord FlipLink et tu le colles dans le code HTML de ton site web, l'éditeur de ton CMS ou ton constructeur de page de destination. L'iFrame charge la visionneuse FlipLink complète — y compris les [animations de tournpage](/glossary/page-flip-animation), les [boutons CTA](/glossary/call-to-action-cta), les [formulaires de capture de prospects](/glossary/lead-capture) et le [suivi des statistiques](/glossary/analytics-dashboard) — dans les dimensions que tu spécifies. L'[intégration responsive](/features/sharing-and-distribution) de FlipLink garantit que l'iFrame s'adapte automatiquement à n'importe quelle taille d'écran. FlipLink propose aussi une option d'[intégration d'image cliquable](/features/clickable-image-embed) comme alternative légère qui renvoie vers la visionneuse complète.

Une intégration iFrame utilise cette structure HTML de base : ```html <iframe src="https://go.fliplink.me/your-flipbook" width="100%" height="600" frameborder="0" allowfullscreen> </iframe> ``` Attributs clés qui influencent le comportement : - **`src`** — L'URL du contenu à intégrer. FlipLink fournit cette URL pour chaque publication. - **`width` / `height`** — Contrôle la zone visible. Le code d'intégration responsive de FlipLink utilise des largeurs en pourcentage pour des mises en page fluides. - **`sandbox`** — Restreint ce que le contenu intégré peut faire (par exemple, bloquer les formulaires, les scripts ou les popups). Le code d'intégration de FlipLink est configuré pour autoriser les interactions nécessaires à un fonctionnement complet. - **`loading="lazy"`** — Diffère le chargement de l'iFrame jusqu'à ce que l'utilisateur défile à proximité, ce qui améliore les performances de chargement initial de la page. - **`allow`** — Spécifie des permissions de fonctionnalités comme le mode plein écran, que FlipLink utilise pour une lecture immersive.

Les iFrames introduisent une frontière de confiance entre la page hôte et le contenu intégré. Comprendre le modèle de sécurité t'aide à intégrer du contenu en toute sécurité : - **Politique de même origine** — Les navigateurs empêchent la page hôte d'accéder au DOM d'un iFrame d'origine différente, et inversement. Cela signifie que ton site web ne peut pas lire ni manipuler les éléments internes de la visionneuse FlipLink, et que la visionneuse intégrée ne peut pas accéder aux cookies ni aux données de ton site. - **[Liste blanche de domaines](/glossary/domain-whitelisting)** — FlipLink te permet de restreindre les domaines autorisés à intégrer tes publications, empêchant les sites non autorisés d'afficher ton contenu dans leurs propres iFrames. - **Content Security Policy (CSP)** — Si ton site web utilise des en-têtes CSP stricts, tu devras peut-être ajouter le domaine de FlipLink à ta directive `frame-src` pour autoriser le chargement de l'iFrame. - **Protection contre le clickjacking** — FlipLink définit les en-têtes `X-Frame-Options` et CSP appropriés pour contrôler où sa visionneuse peut être intégrée, tout en autorisant tes domaines approuvés.

**« Les iFrames sont mauvais pour le SEO. »** Les moteurs de recherche peuvent suivre les liens à l'intérieur des iFrames et indexer le contenu intégré séparément, mais ce contenu ne contribue pas au classement SEO de la page hôte. Pour les flipbooks, ce n'est pas un souci — la valeur SEO réside dans le contenu, les titres et les métadonnées de ta propre page hôte, tandis que le flipbook sert d'outil d'engagement. **« Les iFrames ralentissent toujours ma page. »** Un iFrame en lui-même ajoute une surcharge minimale. Les problèmes de performance proviennent de ce que l'iFrame charge. L'utilisation de `loading="lazy"` garantit que le flipbook ne se charge que lorsque l'utilisateur défile jusqu'à lui, gardant ton chargement de page initial rapide. **« Les iFrames sont une technologie dépassée. »** Bien que certains usages anciens des iFrames (comme construire des mises en page) soient effectivement dépassés, l'intégration par iFrame reste la norme pour les widgets tiers, les formulaires de paiement et le contenu interactif. Toutes les grandes plateformes — YouTube, Google Maps, Stripe et FlipLink — utilisent des iFrames pour l'intégration.

Un iFrame est la méthode standard et sécurisée pour intégrer du contenu interactif comme des flipbooks sur n'importe quel site web. Il offre toutes les fonctionnalités tout en gardant le contenu intégré isolé du code et des styles de ta page hôte.