différence entre les éléments iframe, embed et object


180

HTML5 définit plusieurs éléments de contenu embarqués, qui, à vol d'oiseau, semblent être très similaires au point d'être largement identiques.

Quelle est la différence réelle entre iframe, embedet object?

Si je souhaite intégrer un fichier HTML à partir d'un site tiers, lesquels de ces éléments pourrais-je utiliser et en quoi diffèrent-ils?


ils ne semblent pas du tout identiques. un site tiers serait un iframe.
Kai Qing


2
@KaiQing Qu'elles soient identiques ou non, c'est votre opinion, évidemment non partagée par l'OP. Oh, et au fait, ce n'est pas non plus une réponse à sa question.
Malik A. Rumi

1
@Malik - c'est pourquoi c'est un commentaire. Et non, avoir l'air identique n'est pas mon avis puisque les définitions de chacun décrivent clairement les différences et quand vous les utiliseriez. Comment ils apparaissent sur le front-end pourrait théoriquement sembler identique, mais je pense que le contexte du PO était dans l'utilisation et non dans l'apparence. Le commentaire est pour illustrer que vous utiliseriez une iframe pour un tiers, comme ils l'ont demandé. Je ne peux que supposer que j'étais trop occupé pour écrire une réponse complète à l'époque.
Kai Qing

Maintenant, MDN a une explication détaillée developer.mozilla.org/en-US/docs/Learn/HTML/…
ohkts11

Réponses:


122

<iframe>

L'élément iframe représente un contexte de navigation imbriqué. Norme HTML 5 - "L' <iframe>élément"

Principalement utilisé pour inclure des ressources d'autres domaines ou sous-domaines, mais peut également être utilisé pour inclure du contenu du même domaine. La <iframe>force du logiciel est que le code incorporé est «en direct» et peut communiquer avec le document parent.

<embed>

Standardisé en HTML 5, avant cela, il s'agissait d'une balise non standard, qui était certes implémentée par tous les principaux navigateurs. Le comportement avant HTML 5 peut varier ...

L'élément embed fournit un point d'intégration pour une application externe (généralement non HTML) ou un contenu interactif. ( Norme HTML 5 - "L' <embed>élément" )

Utilisé pour intégrer du contenu pour les plugins de navigateur. Les exceptions à cela sont SVG et HTML qui sont traités différemment selon la norme.

Le détail de ce qui peut et ne peut pas être fait avec le contenu intégré dépend du plugin de navigateur en question. Mais pour SVG, vous pouvez accéder au document SVG intégré à partir du parent avec quelque chose comme:

svg = document.getElementById("parent_id").getSVGDocument();

Depuis l'intérieur d'un document SVG ou HTML incorporé, vous pouvez atteindre le parent avec:

parent = window.parent.document;

Pour le HTML incorporé, il n'y a aucun moyen d'accéder au document incorporé du parent (que j'ai trouvé).

<object>

L' <object>élément peut représenter une ressource externe, qui, selon le type de ressource, sera soit traitée comme une image, comme un contexte de navigation imbriqué, soit comme une ressource externe à traiter par un plugin. ( Norme HTML 5 - "L' <object>élément" )

Conclusion

À moins que vous n'incorporiez SVG ou quelque chose de statique, vous êtes probablement le meilleur à utiliser <iframe>. Pour inclure l'utilisation de SVG <embed>(si je me souviens bien <object>, ne vous laissera pas script †). Honnêtement, je ne sais pas pourquoi vous utiliseriez <object>sauf pour les navigateurs plus anciens ou flash (avec lesquels je ne travaille pas).

† Comme indiqué dans les commentaires ci-dessous; les scripts dans <object>s'exécuteront mais les contextes parent et enfant ne peuvent pas communiquer directement. Avec <embed>vous pouvez obtenir le contexte de l'enfant du parent et vice versa. Cela signifie que vous pouvez utiliser des scripts dans le parent pour manipuler l'enfant, etc. Cette partie n'est pas possible avec <object>ou <iframe>où vous auriez à mettre en place un autre mécanisme à la place, comme l'API JavaScript postMessage .


4
embedest idéal pour amener le visiteur à suivre une chaîne de redirection provenant d'un site Web qui bloque le cadrage. (Nous l'utilisons pour lancer la connexion fédérée.)
Riking

3
Ce n'est pas vrai pour "l'objet ne laissera pas le script". schepers.cc/svg/blendups/embedding.html
Dzenly

@Dzenly Les scripts déclarés dans, par exemple, et SVG inclus via <object>s'exécuteront, mais il n'est pas possible (ou je n'ai pas réussi) d'accéder au contexte de l'objet depuis la page parente. Ainsi, les scripts "internes" s'exécuteront, les scripts "externes", du point de vue de l'objet, ne peuvent pas communiquer avec le contexte des objets.
Jonas Schubert Erlandsson

<embed> est vraiment obsolète. Je ne l'utiliserais plus pour rien. Aujourd'hui, tous les principaux navigateurs peuvent utiliser un objet pour chaque plugin possible. Si vous souhaitez utiliser flash et définir son type au lieu d'un CLSID, il fonctionnera dans tous les navigateurs de la même manière. Il peut même exécuter des applets java. Cependant, j'utiliserais toujours des iframes pour intégrer des pages externes.
Bachsau

2
@Bachsau puisqu'il s'agit d'une discussion sur les différentes options et leurs compromis, il est faux de dire simplement que <iframe />c'est la voie à suivre. L'intérêt de l'article est qu'ils sont tous différents. <embed>est toujours dans la spécification: w3.org/TR/html5/embedded-content-0.html#the-embed-element , donc le mentionner est justifié. Je trouve aussi plus qu'un peu drôle que vous disiez que <embed>c'est obsolète et que vous mentionniez les applets Java dans la phrase suivante :)
Jonas Schubert Erlandsson

28

Une des raisons d'utiliser objectover iframeest que l'objet redimensionne le contenu incorporé pour l'adapter aux dimensions de l'objet. le plus notable sur safari dans l'iPhone 4s où la largeur de l'écran est 320pxet le code HTML de l'URL intégrée peut définir des dimensions plus grandes.


9
Pouvez-vous nous donner plus de détails et / ou des références? Sinon, cela ne peut être considéré que comme un commentaire, pas comme une réponse.
cnst le

9
oui, mais c'est un commentaire utile
Malik A. Rumi

1
C'était mon cas d'utilisation, certainement un bon commentaire utile.Merci.
Sid

8
iFrame + iPhone = iHeadache
djvg

4

Une autre raison d'utiliser objectsur iframe est que les objectsous-ressources (quand un <object>exécute des HTTPrequêtes) sont considérées comme passive/displayen termes de Mixed content, ce qui signifie qu'elle est plus sécurisée lorsque vous devez l'avoir Mixed content.

Le contenu mixte signifie que lorsque vous avez httpsmais que votre ressource provient de http.

Référence: https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content


Cela ne semble pas être le cas en fonction de la lecture actuelle de l'article lié, qui répertorie les objets sous les titres actifs et passifs. Passif: "sous-ressources (quand un <objet> effectue des requêtes HTTP)" / Actif: "<object> (attribut de données)" (ce dernier est la façon dont vous chargez une autre requête HTTP selon la question d'origine.
Tim Abell
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.