web-dev-qa-db-ja.com

iframe、embed、およびobject要素の違い

HTML5はいくつかの埋め込みコンテンツ要素を定義しています。鳥瞰図から見ると、これらはほとんど同一であるという点と非常によく似ているように見えます。

iframe、embed、およびobjectの実際の違いは何ですか？

サードパーティのサイトからHTMLファイルを埋め込みたい場合、これらの要素のどれを使用できますか？

html5iframe
142
cnst

<iframe>

Iframe要素は、ネストされたブラウジングコンテキストを表します。 HTML 5標準-「<iframe>要素」

主に他のドメインまたはサブドメインのリソースを含めるために使用されますが、同じドメインのコンテンツを含めるためにも使用できます。 <iframe>の強みは、埋め込みコードが「ライブ」であり、親ドキュメントと通信できることです。

<embed>

HTML 5で標準化され、それ以前は非標準タグでしたが、これは明らかにすべての主要なブラウザーで実装されていました。 HTML 5より前の動作は異なる場合があります...

Embed要素は、外部（通常は非HTML）アプリケーションまたはインタラクティブコンテンツの統合ポイントを提供します。 （ HTML 5標準-「<embed>要素」 ）

ブラウザプラグインのコンテンツを埋め込むために使用されます。これの例外は、標準に従って異なる方法で処理されるSVGとHTMLです。

埋め込みコンテンツでできることとできないことの詳細は、問題のブラウザプラグイン次第です。ただし、SVGの場合、次のような方法で親から埋め込みSVGドキュメントにアクセスできます。

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

埋め込みSVGまたはHTMLドキュメント内から、次の方法で親にアクセスできます。

parent = window.parent.document;

埋め込みHTMLの場合、親から埋め込みドキュメントを取得する方法はありません（私が見つけた）。

<object>

<object>要素は、外部リソースを表すことができます。外部リソースは、リソースのタイプに応じて、画像、ネストされたブラウジングコンテキスト、またはプラグインによって処理される外部リソースとして扱われます。 （ HTML 5標準-「<object>要素」 ）

結論

SVGまたは静的なものを埋め込む場合を除き、おそらく<iframe>を使用するのが最適です。 SVGを含めるには、<embed>を使用します（正しく覚えていれば、<object>はスクリプトを作成できません†）。正直なところ、古いブラウザやフラッシュ（私とは連携しない）を除いて、なぜ<object>を使用するのかわかりません。

†以下のコメントで指摘されているとおり。 <object>のスクリプトは実行されますが、親コンテキストと子コンテキストは直接通信できません。 <embed>を使用すると、親から子のコンテキストを取得でき、その逆も可能です。これは、親でスクリプトを使用して子などを操作できることを意味します。その部分は、<object>または<iframe>では使用できず、代わりに JavaScript postMessage API 。

104
Jonas Schubert Erlandsson

objectでiframeを使用する理由の1つは、オブジェクトのサイズに合わせて、オブジェクトが埋め込みコンテンツのサイズを変更することです。画面の幅が320pxで、埋め込みURLのhtmlが寸法を大きく設定する可能性があるiPhone 4sのサファリで最も顕著です。

20
ivanixdev

Iframeでobjectを使用するもう1つの理由は、objectサブリソース（<object>がHTTP要求を実行する場合）がpassive/displayに関してMixed contentと見なされるためです。つまり、Mixed contentが必要な場合はより安全です。

混合コンテンツとは、httpsはあるが、リソースはhttpからのものである場合を意味します。

リファレンス： https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content

2
harunurhan