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

HTML5 définit plusieurs éléments de contenu incorporés qui, d’un sharepoint vue global, 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 veux intégrer un fichier HTML à partir d’un site tiers, lequel de ces éléments pourrais-je utiliser et en quoi seraient-ils différents?

L’élément iframe représente un contexte de navigation nested. HTML 5 standard – “L’élément

Principalement utilisé pour inclure des ressources d’autres domaines ou sous-domaines, mais peut également être utilisé pour inclure du contenu provenant du même domaine. La force de est que le code incorporé est “live” et peut communiquer avec le document parent.

Standardisé en HTML 5, avant cela, c’était 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 d’intégration 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 ” )

Utilisé pour intégrer du contenu pour les plug-ins de navigateur. Les exceptions à cette règle sont SVG et HTML, qui sont traitées différemment selon la norme.

Les détails de ce qui peut et ne peut pas être fait avec le contenu incorporé relèvent du plug-in de navigateur en question. Mais pour SVG, vous pouvez accéder au document SVG intégré du parent avec quelque chose comme:

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

Depuis l’intérieur d’un document SVG ou HTML intégré, vous pouvez joindre le parent avec:

 parent = window.parent.document; 

Pour le HTML incorporé, il n’y a aucun moyen d’obtenir le document incorporé à partir du parent (que j’ai trouvé).

L’élément peut représenter une ressource externe qui, selon le type de ressource, sera traitée comme une image, un contexte de navigation nested ou une ressource externe à traiter par un plug-in. ( HTML 5 standard – “L’élément ” )

Conclusion

Sauf si vous incorporez SVG ou quelque chose de statique, vous ferez probablement mieux d’utiliser . Pour inclure SVG, utilisez (si je me souviens bien, ne vous laissera pas script †). Honnêtement, je ne sais pas pourquoi vous utiliseriez sauf pour les navigateurs plus anciens ou Flash (avec lesquels je ne travaille pas).

† Comme indiqué dans les commentaires ci-dessous; les scripts dans seront exécutés mais les contextes parent et enfant ne peuvent pas communiquer directement. Avec vous pouvez extraire 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 ou où vous devrez configurer un autre mécanisme, tel que l’API JavaScript postMessage .

L’une des raisons d’utiliser un object sur iframe est que cet object redimensionne le contenu incorporé pour l’adapter aux dimensions de l’object. Le plus notable sur Safari dans l’iPhone 4s où la largeur de l’écran est 320px et le HTML à partir de l’URL incorporée peut définir des dimensions plus grandes.

Une autre raison d’utiliser un object sur iframe est que les sous-ressources d’ object (lorsqu’un exécute HTTP requêtes HTTP ) sont considérées comme passive/display en termes de Mixed content , ce qui signifie qu’elles sont plus sécurisées lorsque le 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