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