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:

@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

@ 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

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

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

— Bachsau 12/03/19

@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

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

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

sim, mas é um comentário útil #

— Malik A. Rumi

Este foi o meu caso de uso, definitivamente um bom comentário útil. Obrigado.

— 214 Sid

iFrame + iPhone = iHeadache

— djvg 27/06

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