HTML での Iframe の代替

Subodh Poudel 2023年2月19日
  1. HTML の Iframe の代わりに object タグを使用する
  2. HTML の Iframe の代わりに embed タグを使用する
HTML での Iframe の代替

HTML では、Iframe を使用して、Web ページを Web ページに埋め込むことができるインラインフレームを指定します。このチュートリアルでは、Web ページを表示するための Iframe に代わるいくつかの方法を紹介します。

HTML の Iframe の代わりに object タグを使用する

HTML の object タグを使用して、Web ページに外部リソースを埋め込むことができます。タグを使用して、Web ページに別の Web ページを表示できます。object タグは、HTML の iframe タグの代替です。このタグを使用して、画像、ビデオ、オーディオなどのさまざまなマルチメディアコンポーネントを埋め込むことができます。object タグには、埋め込む Web ページの URL を定義できる属性 data があります。width 属性と height 属性を使用して、コンテナの幅と高さを設定することもできます。

たとえば、object タグを記述し、data 属性に URL https://theuselessweb.com/を設定します。次に、object タグの width 属性と height 属性を 800 に設定します。次に、type 属性を text/html に設定します。最後に、object タグを閉じます。

次の Web ページをブラウザにロードすると、コンテナに埋め込まれた Web ページが表示されます。埋め込まれた Web ページを操作できます。タイプ text/html は、埋め込まれたコンテンツが HTML であることを示します。このようにして、object タグを使用して、HTML の iframe タグの代わりとなる Web ページを Web ページに埋め込むことができます。ただし、object タグの代わりに iframe タグを使用することをお勧めします。

サンプルコード:

<object data="https://theuselessweb.com/"
width="800"
height="800"
type="text/html">
</object>

HTML の Iframe の代わりに embed タグを使用する

embed タグは object タグに似ており、同じ目的で使用されます。embed タグを使用して、さまざまな外部リソースを Web ページに埋め込むことができます。PDF、画像、オーディオ、ビデオ、Web ページなどのメディアを埋め込むことができます。タグは、目的のコンテンツを埋め込むことができるコンテナを定義します。embed タグは自動終了タグです。src 属性を使用して、埋め込む Web ページの URL を指定できます。タグには、埋め込まれるコンテンツのタイプを指定するための type 属性があります。object タグと同じように、高さと幅を同様に定義できます。

たとえば、embed タグを記述し、type 属性を text/html に設定します。次に、src 属性を記述し、https://theuselessweb.com/に設定します。次に、コンテナの高さと幅を 500800 に設定します。

高さと幅の測定値はピクセル単位です。このようにして、HTML の iframe タグの代わりに embed タグを使用できます。ただし、embed タグではなく iframe タグをお勧めします。

サンプルコード:

<embed type="text/html" src="https://theuselessweb.com/" width="800" height="500">
著者: Subodh Poudel
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn