html - iframe、embed、object 要素の違い

Question

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

とiframeの実際の違いは何ですか?embedobject

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

Answer 1

<iframe>

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

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

<embed>

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

埋め込み要素は、外部 (通常は非 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>すると、親から子のコンテキストを取得でき、その逆も可能です。これは、親でスクリプトを使用して子などを操作できることを意味します。その部分は、JavaScript postMessage APIなど、代わりに他のメカニズムを設定する必要がある場所では不可能<object>です。<iframe>

Answer 2

objectoverを使用する理由の 1 つiframeは、object がオブジェクトのサイズに合わせて埋め込みコンテンツのサイズを変更することです。iPhone 4s の safari で最も顕著で、画面幅が 1320pxであり、埋め込まれた URL からの html がより大きな寸法を設定する場合があります。