diferencia entre iframe, incrustación y elementos de objeto

180

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.

¿Qué es la diferencia real entre iframe, embedy object?

Si deseo incrustar un archivo HTML desde un sitio de terceros, ¿cuál de estos elementos podría usar y en qué se diferenciarían?

html iframe cnst
fuente
en realidad no se ven idénticos en absoluto. El sitio de terceros sería un iframe.
Kai Qing
incrustar vs subconjunto de objetos: stackoverflow.com/questions/1244788/embed-vs-object , iframe vs subconjunto de objetos: stackoverflow.com/questions/924946/… , incrustar vs objeto vs video: stackoverflow.com/questions/11199048/…
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
2
@KaiQing Ya sea que se vean idénticos o no, es su opinión, obviamente no es compartida por el OP. Ah, y por cierto, tampoco es una respuesta a su pregunta.
Malik A. Rumi
1
@Malik: por eso es un comentario. Y no, parecer idéntico no es mi opinión ya que las definiciones de cada uno describen claramente las diferencias y cuándo usaría cada una. La forma en que aparecen en el front end podría parecer teóricamente idéntica, pero creo que el contexto del OP estaba en uso y no en apariencia. El comentario es para ilustrar que usaría un iframe para terceros, como lo solicitaron. Solo puedo suponer que estaba demasiado ocupado para escribir una respuesta completa en ese momento.
Kai Qing
Ahora MDN tiene una explicación detallada developer.mozilla.org/en-US/docs/Learn/HTML/…
ohkts11

Respuestas:

122

<iframe>

El elemento iframe representa un contexto de navegación anidado. HTML 5 estándar - "El <iframe>elemento"

Se usa principalmente para incluir recursos de otros dominios o subdominios, pero también se puede usar para incluir contenido del mismo dominio. La <iframe>fortaleza de esto es que el código incrustado está "en vivo" y puede comunicarse con el documento padre.

<embed>

Estandarizado en HTML 5, antes era una etiqueta no estándar, que ciertamente fue implementada por todos los principales navegadores. El comportamiento anterior a HTML 5 puede variar ...

El elemento incrustado proporciona un punto de integración para una aplicación externa (normalmente no HTML) o contenido interactivo. ( HTML 5 estándar - "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 de acuerdo con el estándar.

Los detalles de lo que se puede y no se puede hacer con el contenido incrustado depende del complemento del navegador en cuestión. Pero para SVG puede 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 incorporado, puede comunicarse con el padre con:

parent = window.parent.document;

Para HTML incrustado no hay forma de obtener el documento incrustado del padre (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 para ser procesado por un complemento. ( HTML 5 estándar - "El <object>elemento" )

Conclusión

A menos que esté incrustando SVG o algo estático, probablemente sea mejor usarlo <iframe>. Para incluir el uso de SVG <embed>(si no recuerdo mal <object>, no te dejaré script †). Honestamente, no sé por qué usarías<object> menos que para navegadores antiguos o flash (con los que no trabajo).

† Como se señala en los comentarios a continuación; los scripts <object>se ejecutarán pero los contextos padre e hijo no pueden comunicarse directamente. Con <embed>usted puede obtener el contexto del niño del padre y viceversa. Esto significa que puede usar scripts en el padre para manipular al niño, etc. Esa parte no es posible con <object>o <iframe>donde tendría que configurar algún otro mecanismo, como la API de JavaScript postMessage .

Jonas Schubert Erlandsson
fuente
44
embedes ideal para que el visitante siga una cadena de redireccionamiento que se origina en un sitio web que bloquea el encuadre. (Lo usamos para iniciar el inicio de sesión federado).
Riking
3
No es cierto acerca de "el objeto no deja script". schepers.cc/svg/blendups/embedding.html
Dzenly
@Dzenly Los scripts declarados en, por ejemplo, y SVG incluidos a través de <object>se ejecutarán, pero no es posible (o no lo logré) llegar al contexto del objeto desde la página principal. Por lo tanto, los scripts "internos" se ejecutarán, los scripts "externos", desde el punto de vista del objeto, no pueden comunicarse con el contexto de los objetos.
Jonas Schubert Erlandsson
<embed> está realmente desactualizado. No lo usaría para nada más. Hoy en día, todos los principales navegadores pueden usar objetos para todos los complementos posibles. Si desea utilizar flash y definir su tipo en lugar de un CLSID, funcionará en todos los navegadores de la misma manera. Incluso puede ejecutar applets de Java. Sin embargo, todavía usaría iframes para incrustar páginas externas.
Bachsau
2
@Bachsau, dado que esta es una discusión sobre las diferentes opciones y sus compensaciones, se siente mal decir que <iframe />es el camino a seguir. El punto completo de la publicación es que todos son diferentes. <embed>todavía está en la especificación: w3.org/TR/html5/embedded-content-0.html#the-embed-element , por lo que mencionarlo está justificado. También me parece más que un poco divertido que argumentas que <embed>está desactualizado y mencionas los applets de Java en la siguiente oración :)
Jonas Schubert Erlandsson
28

Una razón para usar objectmás iframees que el objeto cambia el tamaño del contenido incrustado para adaptarse a las dimensiones del objeto. más notable en safari en iPhone 4s donde el ancho de pantalla es 320pxy el html de la URL incrustada puede establecer dimensiones mayores.

ivanixdev
fuente
9
¿Puede amablemente dar más detalles y / o referencias? De lo contrario, esto solo califica como un comentario, no como una respuesta.
cnst
9
sí, pero es un comentario útil
Malik A. Rumi el
1
Este fue mi caso de uso, definitivamente un buen comentario útil. Gracias.
Sid
8
iFrame + iPhone = iHeadache
djvg
4

Otra razón para usar objectsobre iframe es que los objectsub recursos (cuando un <object>realiza HTTPsolicitudes) se consideran passive/displayen términos de Mixed content, lo que significa que es más seguro cuando debe tenerMixed content .

Contenido mixto significa que cuando tienes httpspero tu recurso es dehttp .

Referencia: https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content

harunurhan
fuente
Ese no parece ser el caso basado en la lectura actual del artículo vinculado, que enumera los objetos bajo encabezados activos y pasivos. Pasivo: "recursos secundarios (cuando un <objeto> realiza solicitudes HTTP)" / Activo: "<objeto> (atributo de datos)" (este último es cómo cargar otra solicitud HTTP según la pregunta original.
Tim Abell