[Parcours Utilisateurs] - Fonctionnement des iframes

Pour réaliser des actions à l'intérieur des iframes, il faut utiliser des selecteurs CSS soit à l'intérieur de l'iframe, soit à l'extérieur, mais PAS des selecteurs qui "traversent" les 2 contextes.

Avec un exemple ça sera mieux, avec ce HTML :

<div class="main">
  <form id="my-form"></form>
  <iframe>
    <div class="frame-content">
      <form id="my-form">
      </form>
    </div>
  </iframe>
</div>
.main iframe

✅ ⇒ renvoie bien l'iframe

 

#my-form

✅ ⇒ renvoie le 1er my-form (celui qui n'est pas dans l'iframe)

 

.main iframe .frame-content

❌ ⇒ ne fonctionne pas, car .frame-content appartient au document de l'iframe

 

.frame-content #my-form

✅ ⇒renvoie bien le form qui se trouve à l'intérieur de l'iframe cette fois-ci

 

iframe #my-form

❌ ⇒ ne fonctionne pas car #my-form est déjà dans le document de l'iframe.

 

 

⚠️ Quand on veut un élément qui est à l'intérieur d'une iframe, on doit faire comme si TOUT ce qu'il y a en dehors du CONTENU de l'iframe n'existait pas.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 0 sur 0
Vous avez d’autres questions ? Envoyer une demande

0 Commentaires

Vous devez vous connecter pour laisser un commentaire.