iframeはDOM操作しようとするとidやクラスにアクセスするのに癖があったり他にも何にかと厄介いになる原因になる存在。
基本的な扱いや意味は知っていいても存在意義について考えたことがなかったので初心者さんのためにも簡単に基本からまとめます。
iframeとは
iframeはインラインフレームの略です。
iframeとは簡単にいうと他のhtmlファイルを読み込むための存在です。
元のHTMLの中に新しくHTMLを追加できるようになります。
画像で表すとこんな感じです。
iframeをなぜ使うのか
iframeをなぜ使うのか
ポイント
・外部のWEBページを読み込める
・ページ内の情報を効果的に表示することができる
Youtubeの埋め込みもiframeを使ってます。
僕も良く埋め込みをするけどこんなところにもiframeが使われていたんだなぁと思いました。
確かに便利。
まとめ
HTMLの中に手軽に要素を追加できる
クロスドメイン問題
さてここからは少々技術的な話。
端的にいうとiframeはクロスドメインが厄介。
クロスドメインのiframeはheightとwidthが動的に変わらず、固定値になってしまう+中にstyleタグでcssをしている場合触れないです。
詳しくいうとiframe のソース URL のドメインがホストページのドメインとは異なる場合、ホストは iframe のコンテンツを参照できないということです
初めてiframeをDOM操作する方は悩むかもしれません。
まとめ
・iframeは外部からの読み込みに非常に便利
・セキュリティ面でDOM操作が難しい時がある
