Diferencia entre elementos iframe, embed y object
HTML5 define varios elementos de contenido incrustados que, a vista de pájaro, parecen ser muy similares hasta el punto de ser en gran medida idénticos.
¿ Cuál es la diferencia real entre iframey ?embedobject
Si quiero incrustar un archivo HTML de un sitio de terceros, ¿cuál de estos elementos podría usar y en qué se diferenciarían?
<iframe>
El elemento iframe representa un contexto de navegación anidado. Estándar HTML 5: "El
<iframe>elemento"
Se utiliza principalmente para incluir recursos de otros dominios o subdominios, pero también se puede utilizar para incluir contenido del mismo dominio. El <iframe>punto fuerte es que el código incrustado está "vivo" y puede comunicarse con el documento principal.
<embed>
Estandarizada en HTML 5, antes era una etiqueta no estándar, que ciertamente fue implementada por todos los principales navegadores. El comportamiento previo a HTML 5 puede variar...
El elemento de inserción proporciona un punto de integración para una aplicación externa (normalmente no HTML) o contenido interactivo. ( Estándar HTML 5 - "El
<embed>elemento" )
Se utiliza para incrustar contenido para complementos del navegador. Las excepciones a esto son SVG y HTML, que se manejan de manera diferente según el estándar.
Los detalles de lo que se puede y no se puede hacer con el contenido incrustado dependen del complemento del navegador en cuestión. Pero para SVG puedes acceder al documento SVG incrustado desde el padre con algo como:
svg = document.getElementById("parent_id").getSVGDocument();
Desde el interior de un documento SVG o HTML incrustado, puede comunicarse con el padre con:
parent = window.parent.document;
Para HTML incrustado no hay forma de acceder al documento incrustado desde el documento principal (que he encontrado).
<object>
El
<object>elemento puede representar un recurso externo que, según el tipo de recurso, se tratará como una imagen, como un contexto de navegación anidado o como un recurso externo que será procesado por un complemento. ( Estándar HTML 5 - "El<object>elemento" )
Conclusión
A menos que esté incrustando SVG o algo estático, probablemente sea mejor utilizar <iframe>. Para incluir el uso de SVG <embed>(si no recuerdo mal, <object>no te dejaré script†). Honestamente, no sé por qué lo usarías <object>a menos que sea para navegadores antiguos o flash (con los que no trabajo).
† Como se señala en los comentarios a continuación; Los scripts se <object>ejecutarán pero los contextos padre e hijo no pueden comunicarse directamente. Con <embed>puede obtener el contexto del niño del padre y viceversa. Esto significa que puede usar scripts en el padre para manipular al hijo, etc. Esa parte no es posible <object>o <iframe>donde tendría que configurar algún otro mecanismo, como la API postMessage de JavaScript .
Una razón para usar objectover iframees que el objeto cambia el tamaño del contenido incrustado para que se ajuste a las dimensiones del objeto. más notable en safari en iPhone 4s donde el ancho de la pantalla es 320pxy el html de la URL incrustada puede establecer dimensiones mayores.
