iframeとは
- HTML内に別のHTMLページを埋め込むタグ
- 外部のコンテンツを自分のWebページに簡単に組み込むことができる
<iframe src="https://example.com" width="600" height="400"></iframe>
主な属性
-
src: 埋め込むコンテンツのURL -
width,height: iframeの表示サイズ -
allowfullscreen: 全画面表示を許可 -
loading: ブラウザーが iframe をどのように読み込むか設定 -
sandbox: セキュリティ強化のための制限を加える
特徴
- 埋め込まれたページを独立したドキュメント（windowオブジェクト）として読み込む
- ページの一部だけを更新できる
- 異なるドメイン（オリジン）の場合、親ページからのDOM操作・データアクセスは制限される
- 独立したナビゲーション・状態管理がされる
- CSS・JavaScriptなどはiframe内と外で分離されている
注意
- iframeで表示しているページの内容は、自分のサイトのコンテンツとしては評価されないためSEOの影響を考慮する必要がある
- 複数のiframeを使うとメモリやCPUリソースを多く消費する
- クリックジャッキングなどセキュリティ面のリスクを考慮する必要がある