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/
に設定します。次に、コンテナの高さと幅を 500
と 800
に設定します。
高さと幅の測定値はピクセル単位です。このようにして、HTML の iframe
タグの代わりに embed
タグを使用できます。ただし、embed
タグではなく iframe
タグをお勧めします。
サンプルコード:
<embed type="text/html" src="https://theuselessweb.com/" width="800" height="500">
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