HTML/CSS

HTMLのiframeとは何か簡単に説明する

投稿日:2019年11月27日 更新日:

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操作が難しい時がある

関連記事

2020年最新プログラミングスクール おすすめランキング【WEBエンジニアになりたい方向け】と書かれた画像
プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

 

続きを見る

プログラミングを独学で習得する3つの方法|現役プログラマーの僕が解説と書かれた画像
プログラミングを独学で習得する3つの方法|現役プログラマーの僕が解説

  てんし君   プログラミングの学習を始めるにあたって多くの人が気にすることがプログラミングは独学でも習得できるのかどうかということです。   この記事では現役のプログ ...

続きを見る

エンジニアの志望動機を聞かれたらなんと答えるのがベストなのか【現役エンジニアが真剣に考えてみた】と書かれた画像
エンジニアの志望動機を聞かれたらなんと答えるのがベストなのか【現役エンジニアが真剣に考えてみた】

  あなたエンジニアの面接のときに志望動機を聞かれたときの良い答えってありますか?   この章ではエンジニア面接の際の良い志望動機の答え方を紹介していきます。   【この ...

続きを見る

SES企業とWEB系自社開発企業どっちがいいの?【転職してわかったことをまとめる】と書かれた画像
SES企業とWEB系自社開発企業どっちがいいの?【転職してわかったことをまとめる】

  あなたSESはよくないってこと?   ここまで読み進めてくださっている方は「SESにいいところないじゃん」と思っているかもしれませんがその考え方は間違っています。 SES企業に ...

続きを見る

【エンジニア最高】エンジニアになって4ヶ月たったので感想をまとめますと書かれた画像
【エンジニア最高】エンジニアになって4ヶ月たったので感想をまとめます

  実はエンジニアになって4ヶ月経ちました。 今回はぶっちゃけエンジニアになってどんな感じ?と気になる方に向けてエンジニアになって数ヶ月経った僕の感想を紹介していきます。   この ...

続きを見る

-HTML/CSS

Copyright© エンジニアてんし君ブログ , 2020 All Rights Reserved.