diferença entre elementos iframe, embed e objeto

180

O HTML5 define vários elementos de conteúdo incorporados, que, do ponto de vista de um pássaro, parecem muito semelhantes ao ponto de serem amplamente idênticos.

Qual é a diferença real entre iframe, embede object?

Se eu quiser incorporar um arquivo HTML de um site de terceiros, qual desses elementos eu poderia usar e como eles diferem?

html iframe cnst
fonte
eles realmente não parecem idênticos. site de terceiros seria um iframe.
Kai Qing
subconjunto incorporar vs objeto: stackoverflow.com/questions/1244788/embed-vs-object , iframe vs subconjunto objeto: stackoverflow.com/questions/924946/… , incorporar vs objeto vs vídeo: stackoverflow.com/questions/11199048/…
Ciro Santilli escreveu:
2
@KaiQing Se eles parecem idênticos ou não, é sua opinião, obviamente não compartilhada pelo OP. Ah, e a propósito, também não é uma resposta para sua pergunta.
Malik A. Rumi
1
@ Malik - é por isso que é um comentário. E não, parecer idêntico não é minha opinião, pois as definições de cada um descrevem claramente as diferenças e quando você usaria cada uma. Como eles aparecem no front-end poderia teoricamente parecer idêntico, mas acho que o contexto do OP estava em uso e não em aparência. O comentário é para ilustrar que você usaria um iframe para terceiros, como eles pediram. Só posso supor que estava ocupado demais para escrever uma resposta completa naquela época.
Kai Qing
Agora, o MDN tem uma explicação detalhada developer.mozilla.org/pt-BR/docs/Learn/HTML/…
ohkts11

Respostas:

122

<iframe>

O elemento iframe representa um contexto de navegação aninhado. Padrão HTML 5 - "O <iframe>elemento"

Usado principalmente para incluir recursos de outros domínios ou subdomínios, mas também pode ser usado para incluir conteúdo do mesmo domínio. O ponto <iframe>forte é que o código incorporado é "ativo" e pode se comunicar com o documento pai.

<embed>

Padronizado no HTML 5, antes disso era uma tag não padrão, que reconhecidamente foi implementada por todos os principais navegadores. O comportamento anterior ao HTML 5 pode variar ...

O elemento embed fornece um ponto de integração para um aplicativo externo (normalmente não HTML) ou um conteúdo interativo. ( Padrão HTML 5 - "O <embed>elemento" )

Usado para incorporar conteúdo para plugins de navegador. Exceções a isso são SVG e HTML que são tratadas de maneira diferente de acordo com o padrão.

Os detalhes do que pode e não pode ser feito com o conteúdo incorporado dependem do plug-in do navegador em questão. Mas para o SVG, você pode acessar o documento SVG incorporado do pai com algo como:

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

De dentro de um documento SVG ou HTML incorporado, você pode entrar em contato com o pai com:

parent = window.parent.document;

Para HTML incorporado, não há como acessar o documento incorporado do pai (que eu encontrei).

<object>

O <object>elemento pode representar um recurso externo que, dependendo do tipo do recurso, será tratado como uma imagem, como um contexto de navegação aninhado ou como um recurso externo a ser processado por um plug-in. ( Padrão HTML 5 - "O <object>elemento" )

Conclusão

A menos que você esteja incorporando SVG ou algo estático, provavelmente é o melhor uso <iframe>. Para incluir o uso de SVG <embed>(se bem me lembro <object>, não o deixarei escrever †). Sinceramente, não sei por que você usaria, a <object>menos que seja para navegadores mais antigos ou flash (com os quais não trabalho).

† Como apontado nos comentários abaixo; os scripts <object>serão executados, mas os contextos pai e filho não podem se comunicar diretamente. Com <embed>você pode obter o contexto da criança dos pais e vice-versa. Isso significa que você pode usar scripts no pai para manipular o filho etc. Essa parte não é possível com <object>ou <iframe>onde você teria que configurar outro mecanismo, como a API postMessage do JavaScript .

Jonas Schubert Erlandsson
fonte
4
embedé ideal para que o visitante siga uma cadeia de redirecionamento originada em um site que bloqueia o enquadramento. (Nós a usamos para pontapé de saída de login federado.)
Riking
3
Não é verdade sobre "objeto não permite script". schepers.cc/svg/blendups/embedding.html
Dzenly
@Dzenly Os scripts declarados em, por exemplo, e SVG incluído via <object>serão executados, mas não é possível (ou não consegui) chegar ao contexto do objeto na página pai. Portanto, scripts "internos" serão executados, scripts "externos", do ponto de vista do objeto, não podem se comunicar com o contexto dos objetos.
Jonas Schubert Erlandsson
<embed> está realmente desatualizado. Eu não usaria mais para nada. Hoje, todos os principais navegadores podem usar objetos para todos os plugins possíveis. Se você deseja usar o flash e definir seu tipo em vez de um CLSID, ele funcionará em todos os navegadores da mesma maneira. Pode até executar applets java. No entanto, eu ainda usaria iframes para incorporar páginas externas.
Bachsau 12/03/19
2
@Bachsau, já que esta é uma discussão sobre diferentes opções e suas vantagens e desvantagens, parece errado dizer apenas <iframe />o caminho a seguir. O ponto principal da postagem é que elas são todas diferentes. <embed>ainda está na especificação: w3.org/TR/html5/embedded-content-0.html#the-embed-element , portanto, mencionar isso é justificado. Eu também achar que é mais do que um pouco engraçado que você argumentar que <embed>está desatualizado e mencionar applets Java na frase seguinte :)
Jonas Schubert Erlandsson
28

Um motivo para usar objectmais iframeé que o objeto redimensiona o conteúdo incorporado para se ajustar às dimensões do objeto. mais notável no safari no iPhone 4s, onde a largura da tela é 320pxe o html do URL incorporado pode definir dimensões maiores.

ivanixdev
fonte
9
Você pode gentilmente dar mais detalhes e / ou referências? Caso contrário, isso será qualificado apenas como um comentário, não como uma resposta.
CNST
9
sim, mas é um comentário útil #
Malik A. Rumi
1
Este foi o meu caso de uso, definitivamente um bom comentário útil. Obrigado.
214 Sid
8
iFrame + iPhone = iHeadache
djvg 27/06
4

Outro motivo para usar objecto iframe é que os objectsub-recursos (quando uma solicitação é <object>executada HTTP) são considerados passive/displayem termos de Mixed content, o que significa que é mais seguro quando você deve terMixed content .

Conteúdo misto significa que quando você tem, httpsmas seu recurso é dehttp .

Referência: https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content

harunurhan
fonte
Esse não parece ser o caso com base na leitura atual do artigo vinculado, que lista o objeto em títulos ativos e passivos. Passivo: "subresources (quando um <object> executa solicitações HTTP)" / Active: "<object> (atributo de dados)" (este último é como você carrega outra solicitação HTTP conforme a pergunta original.
Tim Abell