Contenu intégré

7.1 Élément <iframe>

L'élément <iframe> en HTML est utilisé pour incorporer un autre document HTML dans le document actuel. Cela permet d'afficher le contenu d'autres pages web à l'intérieur du document principal, créant ainsi une possibilité d'intégration de divers ressources comme des vidéos, des cartes, des documents et d'autres pages web.

L'élément <iframe> crée un cadre intégré qui peut afficher un autre document HTML. Ce document peut être chargé depuis n'importe quelle URL et fonctionner indépendamment du document principal.

Syntaxe :

    
      <iframe src="URL"></iframe>
    
  

Exemple d'utilisation :

    
      <iframe src="https://www.example.com" width="600" height="400" title="Exemple d'iframe"></iframe>
    
  

Attributs

• src : URL de l'adresse du document qui sera chargé dans le <iframe>
• width : largeur du cadre (peut être spécifiée en pixels ou en pourcentages)
• height : hauteur du cadre (peut être spécifiée en pixels ou en pourcentages)
• title : brève description du contenu du cadre (important pour l'accessibilité)
• name : nom du cadre, qui peut être utilisé pour cibler des liens et des formulaires
• sandbox : applique des restrictions au contenu du cadre, augmentant ainsi la sécurité
• allow : définit quelles fonctionnalités peuvent être utilisées dans le <iframe> (par exemple, allowfullscreen pour le mode plein écran)

7.2 Attribut allowfullscreen

L'attribut allowfullscreen permet d'activer le mode plein écran pour le contenu chargé dans le <iframe>. Sans cet attribut, le contenu ne pourra pas passer en mode plein écran.

Syntaxe :

    
      <iframe src="https://www.example.com" allowfullscreen></iframe>
    
  

Exemple d'utilisation :

    
      <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/dQw4w9WgXcQ"
        allowfullscreen>
      </iframe>
    
  

Le mode plein écran permet à l'utilisateur de visionner des vidéos ou d'autres ressources en plein écran, améliorant ainsi l'expérience utilisateur.

7.3 Attribut allow

L'attribut allow définit quelles fonctionnalités peuvent être utilisées dans le <iframe>, telles que l'accès à la géolocalisation, caméra, microphone et le mode plein écran.

Syntaxe :

    
      allow="geolocation; microphone; camera; fullscreen"
    
  

Exemple d'utilisation :

    
      <iframe
        src="https://www.example.com"
        allow="geolocation; microphone; camera; fullscreen">
      </iframe>
    
  

Avantages :

• Contrôle des fonctionnalités : permet de spécifier quelles fonctionnalités et API peuvent être utilisées par le contenu intégré
• Gestion des autorisations : offre la flexibilité pour gérer l'accès à diverses fonctionnalités comme la géolocalisation et la caméra

7.4 Attribut sandbox

L'attribut sandbox est utilisé pour appliquer des restrictions au contenu chargé dans le <iframe>. Il empêche l'exécution de certaines actions, telles que l'exécution de scripts ou l'ouverture de fenêtres contextuelles, augmentant ainsi la sécurité.

Syntaxe :

    
      sandbox="allow-scripts allow-same-origin"
    
  

Valeurs de l'attribut sandbox :

• allow-forms : permet l'envoi de formulaires
• allow-modals : permet l'utilisation de fenêtres modales
• allow-orientation-lock : permet le verrouillage de l'orientation de l'écran
• allow-pointer-lock : permet la capture du pointeur
• allow-popups : permet l'ouverture de fenêtres contextuelles
• allow-popups-to-escape-sandbox : permet aux fenêtres contextuelles de sortir de la sandbox
• allow-presentation : permet l'accès aux API de présentation
• allow-same-origin : permet l'exécution de scripts de la même origine
• allow-scripts : permet l'exécution de scripts
• allow-storage-access-by-user-activation : permet l'accès au stockage par l'activation de l'utilisateur
• allow-top-navigation : permet la navigation de haut niveau
• allow-top-navigation-by-user-activation : permet la navigation de haut niveau par l'activation de l'utilisateur

Exemple d'utilisation :

    
      <iframe
        src="https://www.example.com"
        sandbox="allow-scripts allow-same-origin">
      </iframe>
    
  

Avantages :

• Sécurité : empêche l'exécution de scripts potentiellement malveillants et limite les fonctionnalités du contenu intégré
• Contrôle d'accès : permet aux développeurs de spécifier précisément quelles fonctionnalités sont autorisées pour le contenu intégré

7.5 Attribut loading

L'attribut loading contrôle comment le <iframe> est chargé, permettant de différer le chargement tant que l'élément n'est pas visible à l'écran (chargement paresseux).

Valeurs de l'attribut loading :

• lazy : diffère le chargement du <iframe> jusqu'à ce que l'élément soit visible
• eager : le chargement du <iframe> se fait immédiatement, indépendamment de sa visibilité

Syntaxe :

    
      loading="status"
    
  

Exemple d'utilisation :

    
      <iframe
        src="https://www.example.com"
        width="600"
        height="400"
        loading="lazy">
      </iframe>
    
  

Avantages :

• Optimisation des performances : le chargement paresseux réduit la quantité de données chargées et accélère le temps de chargement de la page
• Réduction de l'utilisation des ressources : permet de charger uniquement les éléments que l'utilisateur voit et utilise réellement