différence entre les éléments iframe, embed et object
HTML5 définit plusieurs éléments de contenu incorporés qui, d’une vue à vol d'oiseau, semblent être très similaires au point d’être en grande partie identiques.
Quelle est la différence réelle entre iframe, embed et object?
Si je souhaite intégrer un fichier HTML à partir d'un site tiers, quels éléments puis-je utiliser et en quoi diffèrent-ils?
<iframe>
L'élément iframe représente un contexte de navigation imbriqué. HTML 5 standard - "L'élément
<iframe>"
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 force de <iframe> est que le code incorporé est "actif" et peut communiquer avec le document parent.
<embed>
Normalisé en HTML 5, il s'agissait auparavant d'une balise non standard, qui a certes été implémentée par tous les principaux navigateurs. Les comportements antérieurs à HTML 5 peuvent varier ...
L'élément incorporé fournit un point d'intégration pour une application externe (généralement non HTML) ou un contenu interactif. ( HTML 5 standard - "L'élément
<embed>" )
Utilisé pour incorporer du contenu pour les plugins du navigateur. Les exceptions à cette règle sont SVG et HTML, qui sont gérés différemment selon le standard.
Les détails de ce qui peut et ne peut pas être fait avec le contenu incorporé dépendent du plugin du navigateur en question. Mais pour SVG, vous pouvez accéder au document SVG incorporé depuis le parent avec quelque chose comme:
svg = document.getElementById("parent_id").getSVGDocument();
Depuis un document SVG ou HTML intégré, vous pouvez atteindre le parent avec:
parent = window.parent.document;
Pour le HTML incorporé, il n’ya aucun moyen d’obtenir le document incorporé à partir du parent (que j’ai trouvé).
<object>
L'élément
<object>peut représenter une ressource externe qui, selon le type de la ressource, sera traitée comme une image, comme un contexte de navigation imbriqué ou comme une ressource externe à traiter par un plug-in. ( HTML 5 standard - "L'élément<object>" )
Conclusion
Sauf si vous intégrez du SVG ou quelque chose de statique, vous ferez probablement mieux d'utiliser <iframe>. Pour inclure SVG, utilisez <embed> (si je me souviens bien, <object> ne vous laissera pas écrire le script †). Honnêtement, je ne sais pas pourquoi vous utiliseriez <object> sauf pour les anciens navigateurs ou flash (avec lequel je ne travaille pas).
† Comme indiqué dans les commentaires ci-dessous; les scripts dans <object> seront exécutés, mais les contextes parent et enfant ne peuvent pas communiquer directement. Avec <embed>, vous pouvez obtenir le contexte de l'enfant auprès du parent et inversement. Cela signifie qu'ils peuvent utiliser des scripts dans le parent pour manipuler l'enfant, etc. Cette partie n'est pas possible avec <object> ou <iframe> où vous auriez à configurer un autre mécanisme, tel que l'API JavaScript postMessage .
Une des raisons d'utiliser object sur iframe est 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 320px et où le code HTML de l'URL intégrée peut définir des dimensions supérieures.
Une autre raison d'utiliser object sur iframe est que object les sous-ressources (lorsqu'un <object> exécute HTTP demandes) sont considérées comme passive/display en termes de Mixed content, ce qui signifie que c'est plus sécurisé lorsque vous devez avoir Mixed content.
Un contenu mixte signifie que lorsque vous avez https mais que votre ressource provient de http.
Référence: https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content