differenza tra elementi iframe, embed e object

180

HTML5 definisce diversi elementi di contenuto incorporato che, da una prospettiva a volo d'uccello, sembrano essere molto simili al punto di essere in gran parte identici.

Qual è la differenza effettiva tra iframe, embede object?

Se desidero incorporare un file HTML da un sito di terze parti, quali di questi elementi potrei usare e in che modo differirebbero?

html iframe

— CNST
fonte

non sembrano affatto identici. sito di terze parti sarebbe un iframe.

— Kai Qing,

incorpora vs sottoinsieme oggetto: stackoverflow.com/questions/1244788/embed-vs-object , iframe sottoinsieme di oggetti: stackoverflow.com/questions/924946/… , incorpora vs oggetto vs video: stackoverflow.com/questions/11199048/…

— Ciro Santilli 27 冠状病六四事件法轮功

@KaiQing La tua opinione è identica o meno, ovviamente non condivisa dall'OP. Oh, a proposito, non è nemmeno una risposta alla sua domanda.

— Malik A. Rumi,

@Malik - ecco perché è un commento. E no, sembrare identico non è la mia opinione poiché le definizioni di ciascuna delineano chiaramente le differenze e quando useresti ciascuna. Il modo in cui appaiono sul front-end potrebbe teoricamente apparire identico, ma penso che il contesto del PO fosse in uso e non apparenza. Il commento è per illustrare che useresti un iframe per terze parti, come loro hanno chiesto. Posso solo supporre che ero troppo occupato per scrivere una risposta completa a quei tempi.

— Kai Qing,

Ora MDN ha una spiegazione dettagliata developer.mozilla.org/en-US/docs/Learn/HTML/…

— ohkts11

Risposte:

122

`<iframe>`

L'elemento iframe rappresenta un contesto di esplorazione nidificato. HTML 5 standard - "L' <iframe>elemento"

Utilizzato principalmente per includere risorse da altri domini o sottodomini, ma può essere utilizzato anche per includere contenuti dello stesso dominio. Il punto <iframe>di forza è che il codice incorporato è "attivo" e può comunicare con il documento principale.

`<embed>`

Standardizzato in HTML 5, prima era un tag non standard, che è stato certamente implementato da tutti i principali browser. Il comportamento precedente a HTML 5 può variare ...

L'elemento embed fornisce un punto di integrazione per un'applicazione esterna (in genere non HTML) o contenuto interattivo. ( HTML 5 standard - "L' <embed>elemento" )

Utilizzato per incorporare contenuto per i plug-in del browser. Eccezioni a ciò sono SVG e HTML che sono gestiti in modo diverso secondo lo standard.

I dettagli di ciò che può e non può essere fatto con il contenuto incorporato dipendono dal plug-in del browser in questione. Ma per SVG puoi accedere al documento SVG incorporato dal genitore con qualcosa del tipo:

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

Dall'interno di un documento SVG o HTML incorporato puoi raggiungere il genitore con:

parent = window.parent.document;

Per HTML incorporato non c'è modo di ottenere il documento incorporato dal genitore (che ho trovato).

`<object>`

L' <object>elemento può rappresentare una risorsa esterna, che, a seconda del tipo di risorsa, verrà trattata come un'immagine, come un contesto di navigazione nidificato o come risorsa esterna da elaborare da un plugin. ( HTML 5 standard - "L' <object>elemento" )

Conclusione

A meno che tu non stia incorporando SVG o qualcosa di statico, probabilmente sei il migliore da usare <iframe>. Per includere l'uso di SVG <embed>(se ricordo bene <object>non ti lascerò script †). Onestamente non so perché dovresti utilizzarlo <object>se non per browser o flash precedenti (con cui non lavoro).

† Come sottolineato nei commenti seguenti; gli script <object>verranno eseguiti ma i contesti padre e figlio non possono comunicare direttamente. Con <embed>te puoi ottenere il contesto del bambino dal genitore e viceversa. Ciò significa che puoi usare gli script nel genitore per manipolare il figlio, ecc. Quella parte non è possibile con <object>o <iframe>dove invece dovresti impostare qualche altro meccanismo, come l'API JavaScript postMessage JavaScript .

— Jonas Schubert Erlandsson
fonte

embedè ideale per indurre il visitatore a seguire una catena di reindirizzamento che ha origine in un sito Web che blocca l'inquadramento. (Lo usiamo per dare il via al login federato.)

— Riking

Non è vero per "oggetto non permetterà script". schepers.cc/svg/blendups/embedding.html

— Dzenly

@Dzenly Gli script dichiarati in, ad esempio, e SVG inclusi tramite <object>verranno eseguiti, ma non è possibile (o non sono riuscito) ad accedere al contesto dell'oggetto dalla pagina padre. Quindi verranno eseguiti script "interni", gli script "esterni", dal punto di vista dell'oggetto, non possono comunicare con il contesto degli oggetti.

— Jonas Schubert Erlandsson,

— Bachsau,

@Bachsau dal momento che si tratta di una discussione su diverse opzioni e sui loro compromessi, è sbagliato dire semplicemente che <iframe />è la strada da percorrere. L'intero punto del post è che sono tutti diversi. <embed>è ancora nelle specifiche: w3.org/TR/html5/embedded-content-0.html#the-embed-element , quindi menzionarlo è giustificato. Trovo anche più che divertente pensare che <embed>sia obsoleto e menzioni le applet Java nella frase successiva :)

— Jonas Schubert Erlandsson

Una ragione per usare objectsopra iframeè quell'oggetto ri-formati il contenuto incorporato per adattarsi alle dimensioni dell'oggetto. soprattutto su Safari in iPhone 4s in cui la larghezza dello schermo è 320pxe l'html dall'URL incorporato può impostare dimensioni maggiori.

— ivanixdev
fonte

Potete gentilmente fornire maggiori dettagli e / o riferimenti? Altrimenti, questo si qualifica solo come un commento, non come una risposta.

— CNST

sì, ma è un commento utile

— Malik A. Rumi,

Questo è stato il mio caso d'uso, sicuramente un buon commento utile. Grazie.

— Sid

iFrame + iPhone = iHeadache

— djvg

Un altro motivo per usare objectiframe è che le objectrisorse secondarie (quando <object>esegue HTTPrichieste) sono considerate come passive/displayin termini di Mixed content, il che significa che è più sicuro quando è necessario Mixed content.

Contenuto misto significa che quando hai httpsma la tua risorsa proviene http.

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

— harunurhan
fonte

Questo non sembra essere il caso basato sulla lettura corrente dell'articolo collegato, che elenca l'oggetto sia in titoli attivi che passivi. Passivo: "subresources (quando un <oggetto> esegue richieste HTTP)" / Attivo: "<oggetto> (attributo dati)" (quest'ultimo è il modo in cui si carica un'altra richiesta HTTP secondo la domanda originale.

— Tim Abell