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?

<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 .

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.

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