iframe、embed、object要素の違い 質問する

iframe、embed、object要素の違い 質問する

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

iframeembedの実際の違いは何ですかobject?

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

ベストアンサー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>

The <object> element can represent an external resource, which, depending on the type of the resource, will either be treated as an image, as a nested browsing context, or as an external resource to be processed by a plugin. (HTML 5 standard - "The <object> element")

Conclusion

Unless you are embedding SVG or something static you are probably best of using <iframe>. To include SVG use <embed> (if I remember correctly <object> won't let you script†). Honestly I don't know why you would use <object> unless for older browsers or flash (that I don't work with).

† As pointed out in the comments below; scripts in <object> will run but the parent and child contexts can't communicate directly. With <embed> you can get the context of the child from the parent and vice versa. This means they you can use scripts in the parent to manipulate the child etc. That part is not possible with <object> or <iframe> where you would have to set up some other mechanism instead, such as the JavaScript postMessage API.

おすすめ記事