difference between iframe embed and object elements

Question

HTML5 defines several embedded content elements  which  from a bird s-eye view  seem to be very similar to the point of being largely identical   What is the actual difference between iframe  embed and object   If I want to embed an HTML file from a third-party site  which of these elements could I use  and how would they differ

User · Answer

iframe have  quot sandbox quot  attribute that may block pop up etc

User · Answer

lt iframe gt   The iframe element represents a nested browsing context  HTML 5 standard -  quot The  lt iframe gt  element quot   Primarily used to include resources from other domains or subdomains but can be used to include content from the same domain as well  The  lt iframe gt  s strength is that the embedded code is  live  and can communicate with the parent document   lt embed gt  Standardised in HTML 5  before that it was a non standard tag  which admittedly was implemented by all major browsers  Behaviour prior to HTML 5 can vary      The embed element provides an integration point for an external  typically non-HTML  application or interactive content   HTML 5 standard -  quot The  lt embed gt  element quot    Used to embed content for browser plugins  Exceptions to this is SVG and HTML that are handled differently according to the standard  The details of what can and can not be done with the embedded content is up to the browser plugin in question  But for SVG you can access the embedded SVG document from the parent with something like  svg   document getElementById  quot parent id quot   getSVGDocument     From inside an embedded SVG or HTML document you can reach the parent with  parent   window parent document   For embedded HTML there is no way to get at the embedded document from the parent  that I have found    lt object gt   The  lt object gt  element can represent an external resource  which  depending on the type of the resource  will either be treated as an image  as a nested browsing context  or as an external resource to be processed by a plugin   HTML 5 standard -  quot The  lt object gt  element quot    Conclusion Unless you are embedding SVG or something static you are probably best of using  lt iframe gt   To include SVG use  lt embed gt   if I remember correctly  lt object gt  won t let you script      Honestly I don t know why you would use  lt object gt  unless for older browsers or flash  that I don t work with       As pointed out in the comments below  scripts in  lt object gt  will run but the parent and child contexts can t communicate directly  With  lt embed gt  you can get the context of the child from the parent and vice versa  This means they you can use scripts in the parent to manipulate the child etc  That part is not possible with  lt object gt  or  lt iframe gt  where you would have to set up some other mechanism instead  such as the JavaScript postMessage API

User · Answer

Another reason to use object over iframe is that object sub resources  when an  lt object gt  performs HTTP requests  are considered as passive display in terms of Mixed content  which means it s more secure when you must have Mixed content   Mixed content means that when you have https but your resource is from http   Reference  https   developer mozilla org en-US docs Web Security Mixed content

User · Answer

One reason to use object over iframe is that object re-sizes the embedded content to fit the object dimensions  most notable on safari in iPhone 4s where screen width is 320px and the html from the embedded URL may set dimensions greater

[html] difference between iframe, embed and object elements

Examples related to html

Examples related to iframe