iframe タグの用途は何ですか?動作原理の詳細な分析

ビデオやオーディオなどの外部コンテンツを Web サイトに埋め込む場合、iframe が非常に役立つことが証明されています。 <div> タグは、HTML ドキュメントに外部コンテンツを収容するためのシンプルでエレガントなソリューションを提供します。 多くの場合、Web サイトの訪問者は外部コンテンツを閲覧していることに気付きません。 しかし、iframe を追加するにはどうすればよいでしょうか?

iframe タグは何に使用されますか?

通常、Web サイトは HTML ドキュメントです。 他の要素を挿入するには、フレームを使用する必要があります。フレームを使用すると、ドキュメント、画像、さらにはビデオを簡単に埋め込むことができます。 以前は、プレーン HTML フレームを使用することでこの問題を解決していましたが、現在は使用されなくなりました。 代わりに、iframe タグはサードパーティのコンテンツを埋め込むための一般的な選択肢となっています。 iframe 内のコンテンツは独立しており、別々に読み込まれ、Web サイトの残りの部分とは独立してナビゲートできます。

これは、他の Web サイト (YouTube 動画や Baidu マップなど) のコンテンツやコンポーネントを統合するためにインライン フレームが使用される理由の 1 つです。 ソーシャル メディア プラグインや特定のアプリケーションも、HTML ドキュメントだけでなく iframe 経由で統合できます。

iframeの構造

iframe は、iframe タグを使用して HTML コード内に作成されます。

 <iframe>...</iframe>

フレームを正しく入力するには、次のプロパティを指定する必要があります。

• src: 埋め込みコンテンツのソース。URL として指定されます。
• width: フレームの幅。ピクセルまたはパーセンテージで指定できます。
• height: フレームの高さ。ピクセルまたはパーセンテージで指定できます。
• name: 特定の iframe の名前。
• サンドボックス: 特定のセキュリティ対策を使用して iframe を接続します。
• srcdoc: iframe に表示される HTML コードが含まれます。

他にも多くの属性がありますが、その多くは非推奨であり、HTML5 以降ではサポートされなくなりました。 外部コンテンツをさらに指定したい場合は、これらの機能に対して CSS ソリューションを利用する必要があります。

• スクロール: iframe を独立してスクロールする必要がありますか?
• align: フレームの配置は何ですか?
• frameborder: フレームの境界線を透明にする必要がありますか?
• longdesc: フレームワークの詳細な説明。
• marginwidth: 左余白と右余白の幅。
• marginheight: 上部と下部の余白の幅。
• vspace: iframe の周囲の垂直スペース。

iframe の実際のコンテンツとその構造の一部は、これらの属性を使用することによってのみ調整できます。 通常、マーク括弧内には内容はありません。 このスペースは代替テキストを収容するために使用されます。 ブラウザが iframe を読み込まない場合は、iframe のテキストが表示されます。 しかし、今日ではこのようなことはほとんど起こりません。 Chrome、Firefox、Safari などの一般的なブラウザはすべて iframe コンテンツを表示できます。

iframe はどのように機能しますか?

iframe (インライン フレーム) は、現在の Web ページに別の Web ページを埋め込むことができる HTML ドキュメント内のタグです。仕組みは次のとおりです:

1. ブラウザは、iframe タグを含む HTML ページを読み込むと、iframe タグの src 属性で指定された URL にリクエストを送信します。
2. リクエストを受信すると、サーバーは Web ページの HTML、CSS、JS ファイルなどのリソースを返します。
3. ブラウザは、サーバーから返されたコンテンツに基づいて、iframe 内の src で指定された Web ページをレンダリングし、iframe タグを含むページに埋め込みます。
4. このようにして、ユーザーは現在の Web ページに埋め込まれた Web ページ コンテンツを表示でき、親ウィンドウと子ウィンドウ間の通信を通じていくつかの特別な機能を実装できます。

iframe は任意の Web ページに埋め込むことができるため、悪意のあるコードの挿入など、特定のセキュリティ リスクも伴うことに注意してください。したがって、iframe を使用する場合は、セキュリティとプライバシーの問題を慎重に考慮する必要があります。

有効な iframe は通常次のようになります。

 <iframe src="http://example.org/demo.html" 高さ="400" 幅="800" 名前="デモ">
  <p>お使いのブラウザは iframe をサポートしていません。 </p>
</iframe>

この例では、コードは別の Web サイト上の HTML ドキュメントを指します。 iframe タグを使用して、Web サーバー上にある HTML ドキュメントを組み込むことができます。 この場合、ファイル名と、必要に応じて目的のドキュメントの場所へのパスを追加するだけで済みます。

ヒント<br> ウェブサイトに YouTube ビデオを埋め込む場合は、iframe を使用できます。 ビデオ プラットフォームでは、関連するビデオのページにこれに対応するコードが提供されます。

iframe を魅力的な方法で作成するには、CSS を使用する必要があります。 ほとんどの場合、フレーム自体が作成されるだけです。 コンテンツが外部ソースから取得される場合、そのコンテンツをカスタマイズして自分のサイトに表示させることはほとんどできません。 いくつかの CSS トリックを使用すると、iframe をレスポンシブ Web デザインに統合できます。

iframeの長所と短所

iframe は、外部リソースの要素を自分のサイトに埋め込む場合に便利です。 ユーザーを別のドメインに転送する代わりに、サイトの閲覧を継続できます。 その結果、ユーザーの利便性が大幅に向上します。 さらに、統合にはいくつかの技術的な利点があります。 iframe のコンテンツは、Web サイトの残りのコンテンツとは独立して読み込まれます。 この方法では、他のページ要素がまだ読み込まれていない場合でも、ユーザーはコンテンツを利用できるようになります。

実際、iframe はアプローチに欠陥があるため、ますます重要性を失っています。 たとえば、検索エンジンからの埋め込み要素を適切に処理できませんでした。 これは SEO に影響し、ウェブサイトのランキングに影響します。 iframe に関連するセキュリティ リスクは、より大きな懸念事項です。 外部コンテンツを埋め込むと、システムに悪影響を与える可能性があります。 たとえば、iframe 内のコンテンツに有害なプラグインが含まれていたり、Web サイトの所有者が気付かないうちにフィッシング攻撃の被害者になったりする可能性があります。

ウェブサイトの所有者とユーザーにとってデータ保護への懸念が高まるにつれ、iframe は白熱した議論を巻き起こしています。 iFrame は、サイト訪問者が「いいね」や「共有」ボタンを操作しない場合や登録ユーザーである場合でも、ソーシャル メディア プラグインによってユーザー データを収集するために使用されることがよくあります。