Unterschied zwischen Iframe-, Embed- und Objektelementen

178

HTML5 definiert mehrere eingebettete Inhaltselemente, die aus der Vogelperspektive dem Punkt der Ähnlichkeit weitgehend ähnlich zu sein scheinen.

Was ist der eigentliche Unterschied zwischen iframe, embedund object?

Welche dieser Elemente kann ich verwenden, wenn ich eine HTML-Datei von einer Website eines Drittanbieters einbetten möchte, und wie würden sie sich unterscheiden?

html iframe

— cnst
quelle

Sie sehen überhaupt nicht identisch aus. Eine Website eines Drittanbieters wäre ein Iframe.

— Kai Qing

Einbettung gegen Objekt-Teilmenge: stackoverflow.com/questions/1244788/embed-vs-object , iframe gegen Objekt-Teilmenge: stackoverflow.com/questions/924946/… , Einbettung gegen Objekt gegen Video: stackoverflow.com/questions/11199048/…

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

@KaiQing Ob sie identisch aussehen oder nicht, ist Ihre Meinung, offensichtlich nicht vom OP geteilt. Oh, und übrigens ist es auch keine Antwort auf seine Frage.

— Malik A. Rumi

@ Malik - deshalb ist es ein Kommentar. Und nein, identisch auszusehen ist nicht meine Meinung, da die Definitionen von jedem die Unterschiede klar umreißen und wann Sie jeden verwenden würden. Wie sie am Frontend erscheinen, könnte theoretisch identisch aussehen, aber ich denke, der Kontext des OP wurde verwendet und nicht angezeigt. Der Kommentar soll veranschaulichen, dass Sie einen Iframe für Dritte verwenden würden, wie sie gefragt haben. Ich kann nur vermuten, dass ich zu beschäftigt war, um damals eine vollständige Antwort zu schreiben.

— Kai Qing

Jetzt hat MDN eine detaillierte Erklärung developer.mozilla.org/en-US/docs/Learn/HTML/…

— ohkts11

Antworten:

122

`<iframe>`

Das iframe-Element repräsentiert einen verschachtelten Browserkontext. HTML 5 Standard - "Das <iframe>Element"

Wird hauptsächlich verwendet, um Ressourcen aus anderen Domänen oder Subdomänen einzuschließen, kann jedoch auch verwendet werden, um Inhalte aus derselben Domäne einzuschließen. Die <iframe>Stärke von ist, dass der eingebettete Code "live" ist und mit dem übergeordneten Dokument kommunizieren kann.

`<embed>`

In HTML 5 standardisiert, war es zuvor ein nicht standardmäßiges Tag, das zugegebenermaßen von allen gängigen Browsern implementiert wurde. Verhalten vor HTML 5 kann variieren ...

Das Einbettungselement bietet einen Integrationspunkt für eine externe (normalerweise nicht HTML) Anwendung oder interaktiven Inhalte. ( HTML 5 Standard - "Das <embed>Element" )

Wird zum Einbetten von Inhalten für Browser-Plugins verwendet. Ausnahmen bilden SVG und HTML, die je nach Standard unterschiedlich behandelt werden.

Die Details darüber, was mit dem eingebetteten Inhalt gemacht werden kann und was nicht, hängt vom jeweiligen Browser-Plugin ab. Für SVG können Sie jedoch vom übergeordneten Dokument aus auf das eingebettete SVG-Dokument zugreifen.

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

Innerhalb eines eingebetteten SVG- oder HTML-Dokuments können Sie das übergeordnete Dokument erreichen mit:

parent = window.parent.document;

Für eingebettetes HTML gibt es keine Möglichkeit, vom eingebetteten Dokument (das ich gefunden habe) auf das eingebettete Dokument zuzugreifen.

`<object>`

Das <object>Element kann eine externe Ressource darstellen, die je nach Ressourcentyp entweder als Bild, als verschachtelter Browserkontext oder als externe Ressource behandelt wird, die von einem Plugin verarbeitet wird. ( HTML 5 Standard - "Die<object> Element" )

Fazit

Wenn Sie SVG oder etwas Statisches nicht einbetten, verwenden Sie es wahrscheinlich am besten <iframe>. Um SVG einzuschließen, verwenden Sie <embed>(wenn ich mich richtig erinnere<object> lassen Sie kein Skript †). Ehrlich gesagt weiß ich nicht, warum Sie es verwenden würden, es <object>sei denn für ältere Browser oder Flash (mit denen ich nicht arbeite).

† Wie in den Kommentaren unten ausgeführt; Skripte in <object>werden ausgeführt, aber die übergeordneten und untergeordneten Kontexte können nicht direkt kommunizieren. Mit <embed>können Sie den Kontext des Kindes vom Elternteil abrufen und umgekehrt. Dies bedeutet, dass Sie Skripte im übergeordneten Element verwenden können, um das untergeordnete Element usw. zu bearbeiten. Dieser Teil ist nicht möglich <object>oder <iframe>Sie müssten stattdessen einen anderen Mechanismus einrichten, z. B. die JavaScript-API postMessage .

— Jonas Schubert Erlandsson
quelle

embedist ideal, um den Besucher dazu zu bringen, einer Weiterleitungskette zu folgen, die von einer Website stammt, die das Framing blockiert. (Wir verwenden es, um die

— Verbundanmeldung

Nicht wahr über "Objekt lässt Skript nicht". schepers.cc/svg/blendups/embedding.html

— Dzenly

@Dzenly Die in beispielsweise deklarierten Skripte und die über eingeschlossene SVG <object>werden ausgeführt, aber es ist nicht möglich (oder ich habe es nicht geschafft), von der übergeordneten Seite aus auf den Kontext des Objekts zuzugreifen. Es werden also "interne" Skripte ausgeführt, "externe" Skripte können aus Sicht des Objekts nicht mit dem Objektkontext kommunizieren.

— Jonas Schubert Erlandsson

— Bachsau

@Bachsau Da dies eine Diskussion über verschiedene Optionen und deren Kompromisse ist, fühlt es sich falsch an, nur verständnislos zu sagen, dass dies <iframe />der richtige Weg ist. Der ganze Punkt des Beitrags ist, dass sie alle unterschiedlich sind. <embed>befindet sich noch in der Spezifikation: w3.org/TR/html5/embedded-content-0.html#the-embed-element , daher ist es gerechtfertigt, dies zu erwähnen. Ich finde es auch mehr als ein bisschen lustig, dass Sie argumentieren, dass <embed>es veraltet ist und Java-Applets im nächsten Satz erwähnen :)

— Jonas Schubert Erlandsson

Ein Grund für die Verwendung von objectover iframebesteht darin, dass das Objekt den eingebetteten Inhalt an die Objektabmessungen anpasst. Am bemerkenswertesten auf Safari in iPhone 4s, wo die Bildschirmbreite 320pxund der HTML-Code der eingebetteten URL möglicherweise größere Abmessungen festlegen.

— ivanixdev
quelle

Können Sie uns bitte weitere Details und / oder Referenzen geben? Andernfalls gilt dies nur als Kommentar, nicht als Antwort.

— cnst

Ja, aber es ist ein hilfreicher Kommentar

— Malik A. Rumi

Dies war mein Anwendungsfall, definitiv ein guter hilfreicher Kommentar. Danke.

— Sid

iFrame + iPhone = iHeadache

— djvg

Ein weiterer Grund für den Einsatz objectüber iframe ist , dass objectSubresourcen (wenn eine <object>führt HTTPAnfragen) gelten als passive/displayin Bezug auf Mixed content, was bedeutet , es ist sicherer , wenn Sie müssen Mixed content.

Gemischter Inhalt bedeutet, dass, wenn Sie httpsaber Ihre Ressource haben , von http.

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

— Harunurhan
quelle

Dies scheint bei der aktuellen Lektüre des verlinkten Artikels, in dem Objekte sowohl unter aktiven als auch unter passiven Überschriften aufgeführt sind, nicht der Fall zu sein. Passiv: "Unterressourcen (wenn ein <Objekt> HTTP-Anforderungen ausführt)" / Aktiv: "<Objekt> (Datenattribut)" (Letzteres ist, wie Sie eine andere HTTP-Anforderung gemäß der ursprünglichen Frage laden.

— Tim Abell