ほんっとにはじめての HTML5 と CSS3

<iframe>要素は、インラインフレームを作るための要素です。
HTML5から、フレームに関する要素は <frameset> <frame> <noframes> が廃止になりましたが、<iframe>要素だけはHTML5で生き残りました。

フレームとは、1つのHTML文書を2つ以上に分割し、それぞれに別のHTMLファイルを表示させたものでした。このように構造が入れ子状なので、親のHTML文書だけではサイトの内容が分かりづらく、プリントやブックマークもしづらく、アクセシビリティ・セキュリティ的にもNGだったため廃止になりました。
フレームサイトの例：おくすり110番 - ハイパー薬辞典
（このサイトは利用価値大なんですが、未だにフレーム…。修正するのが大変なんでしょうね。）

インラインフレームは、HTML内に部分的に領域を作って、そこに他のHTMLを「入れ子」にします。
<object>要素でも、他のHTMLを組み込みましたが、あれと同じようなかんじです。
HTML文書を組み込むなら、こっちの <iframe> が専用の要素です。

<iframe>要素の HTML5 での変更点は、frameborder属性・marginheight属性・marginwidth属性・scrolling属性・longdesc属性・align属性・scrolling属性が廃止されたこと。
代わりに新しく、srcdoc属性・seamless属性・sandbox属性が追加されました。

インラインフレームを配置してみよう

<iframe src="smp63_1.html"></iframe>

<iframe src="smp63_1.html" width="280" height="120"></iframe>

インラインフレームから親ページにリンクを開く

サンプル1では、インラインフレーム内のリンクは同じインラインフレーム内に表示されましたが、今度はリンクを親ページ全体で開くようにします。
サンプルのようにクリックで別ページにリンクするなら、これが自然ですからね。

<iframe src="smp63_2.html" width="280" height="120"></iframe>

<!--インラインフレーム内のHTML（smp63_2.html）-->
<h2>NEWS</h2>
<ul>
<li>サイトをリニューアルしました（2013.12.01）</li>
<li><a href="smp63-2link.html" target="_top">新製品のご紹介</a>ページを更新しました（2013.11.01）</li>
<li><a href="smp63-2link.html" target="_top">お客さまの声</a>を更新しました（2013.10.01）</li>
</ul>

target属性について

target属性は、情報を表示する「ターゲットウィンドウ」を指定します。
target属性が使える要素は、<a> <area> <base> <form> <link>などです。

以下の5種類の値で、「target="（下のキーワード5つのうちどれか1コ）"」というカタチで使って、ウィンドウまたはインラインフレームを指定します。

• _blank ：新規のウィンドウに表示します（ブラウザによっては新規タブで表示します）
• _self：　現在と同じウィンドウ（フレーム）に表示（デフォルト）
• _parent：すぐ上の親ウィンドウ（フレーム）に表示
• _top：フレームを解除してウィンドウ全体に表示（=最上位のウィンドウに表示）
• ウィンドウ（フレーム）名：その名前のウィンドウ（フレーム）に表示
  （name属性で名前をつけておきます）

サンプル1 では、インラインフレーム内のHTMLの<a>に「target属性」を指定していないので、同じフレーム内にリンク先が表示されました。（target="_self" を指定しても同じです）
サンプル2 では、target="_top"と指定したので、ウィンドウ全体（最上位のウィンドウ）にリンク先を表示した、というわけです。

インラインフレームをターゲットにしよう

「target属性」の値の「ウィンドウ（フレーム）名」を利用するには、ターゲットにする<iframe>要素に「name属性」で名前をつけておきます。

半角英数字で好きな名前をつけて良いのですが、「_（アンダーバー）」から始まる名前はNG。（_blankとか、ほかのキーワードで使ってるから。らしいです）

それではさっそく、インラインフレームに名前を付けて、ターゲットにしてみましょう。

<p>下のリンクをクリックしてください。</p>
<ul>
  <li><a href="http://webdesign.practice.jp/" target="target_box">＊Web Design 覚え書き＊を表示</a></li>
  <li><a href="http://honttoni.blog74.fc2.com/" target="target_box">ほんっとにはじめての
HTML5とCSS3を表示</a></li>
</ul>
<iframe name="target_box" style="width:90%"></iframe>

sandbox属性でインラインフレーム内のHTMLの機能を制限しよう

sandbox属性を使うと、<iframe>要素内のHTMLファイルにセキュリティ上の制限を与えます。（<iframe>を サンドボックス化 します。）
これは HTML5 から新しくできた属性です。

sandboxは直訳で「砂場（すなば）」。
公園とかにあるアレ。おもちゃや砂は外に出さないで、砂場の中で遊びますよね。
IT用語で sandbox とは「保護された領域（内でプログラムを稼働させる）」というセキュリティ対策用語になるそうです。
サンドボックス化する = 保護領域にして中身の機能を制限するということだそうです。

<iframe>要素をサンドボックス化すると、
親とは別のオリジン (Origin) として扱われるようになります。
<iframe>内のHTML文書からの target指定が不可になり、
そのHTML文書の form、script、pluginの指定があっても無効になります。

オリジン (Origin) とは プログラミング用語で「データを共有できる範囲」のこと。
whatwgのサイトの解説 では、「例えば、bank.ex.com っていう銀行サイトから、charity.ex.org というチャリティサイトの DOM を調べようとしたら、セキュリティエラーになる」とあります。　違うオリジンだからエラーになると。
同じオリジンって、同じドメインって感覚で良いのかなと思います。
よそのサイトの HTML要素 は、 JavaScript や CSS で操作できませんよね。（されたら困るし！）
それはオリジン (Origin) が違うから。

DOM（Document Object Model）もプログラミング用語。要素にアクセスするための仕組みです。
DOMという名前は知らなくても、けっこう普段使っています。
例えば、JavaScript で「 document.getElementById('ex'); 」なんて書いて、id名がexの要素を特定したり、CSSで「 section p span { color:#ccc; } 」とかで、ある特定のspan要素だけを指定したり、これもみんな DOM を利用しているというわけです。
HTMLの各要素の 位置関係というか親子兄弟関係の構成をDOMって言うみたい。私は今のところそう理解しています。

sandbox属性は、値無しで単に sandbox と指定すると、<iframe>がサンドボックス化します。
（例：<iframe src="ex.html" sandbox></frame>）

そして、sandbox属性には以下の4種類の値があり、指定すればその機能だけ有効にします。

• allow-forms：formの送信の機能を有効にする
• allow-scripts：scriptを有効にする
• allow-same-origin：親と同じオリジン (Origin) として扱わせる
• allow-top-navigation：最上位の親 (target_top) は操作できるようにする

この値は、「半角スペース」で区切って複数指定可能です。

<iframe src="smp63_2.html" width="400" height="100" sandbox></iframe>

<iframe src="smp63_2.html" width="400px" height="100px" sandbox="allow-top-navigation"></iframe>

フレームは、セキュリティ的に弱いと言われていたので、<iframe> のセキュリティ対策として、このsandbox属性ができたのでしょう。

srcdoc属性でインラインフレームにHTMLソースを直接書こう

src属性を使わずに、<iframe>要素に直接HTMLを書いて表示することもできます。
それには srcdoc属性を使います。これも HTML5 から新しくできた属性です。

<iframe src="smp63-4.html"
 srcdoc="<h3>srcdocの属性値としてHTMLソースを書く</h3>
<ul><li>body要素の開始終了タグとその外側の要素は省略可能</li>
<li>a要素でリンクを貼るとエラーになるようです</li>
<li>要素にstyleなどの属性を使ってもエラーになる</li></ul>"
  style="width:90%"></iframe>

seamless属性でシームレスに（HTML5仕様で削除されました）

seamless属性も HTML5のドラフト時に新しくできた属性でした。
これを指定した<iframe>要素の中身はシームレスモードで表示され、親のHTML文書の一部のような扱いになるそうで、<iframe>要素内のリンクは親のHTML文書内のリンクのように開くなど、ユーザビリティの向上のために作られる予定の属性だったようです。

が、seamless属性は、2014年秋の HTML5勧告で 無くなっちゃってた。
草案時も対応ブラウザが少なかったそうですが、無くなってしまったんですね。
（こちら↓の Content attributes をご覧ください）
W3C Recommendation 28 October 2014 | 4.7.2 The iframe element

<iframe>の属性一覧

src="URL"

インラインフレームに組み込むHTMLファイルのURL。

<iframe src="news.html" name="news"  width="400" height="140"></iframe>

name="名前"

親ページの要素のtarget属性で指定されるための任意の名前を指定。

<iframe src="news.html" name="news"  width="400" height="140"></iframe>

width="インラインフレームの幅" 　height="インラインフレームの高さ"

インラインフレームの幅、高さをピクセルで指定。単位なし。マイナスは不可。
指定しなければ、デフォルトのサイズ（300×150px）になります。

<iframe src="news.html" name="news"  width="400" height="140"></iframe>

％で指定したければ、CSS（widthプロパティ、heightプロパティ）を使います。

srcdoc="HTMLソース"　 new

インラインフレームに組み込むHTMLのソースをジカに書きます。

<iframe srcdoc="<p>インラインフレームの内容</p>"></iframe>

sandbox　 new
sandbox="allow-forms"（フォーム機能だけ有効にする）　 new
sandbox="allow-scripts"（スクリプトだけ有効にする）　 new
sandbox="allow-same-origin"（親と同じオリジンとして扱わせる）　 new
sandbox="allow-top-navigation"
　　　　　（最上位の親 (target_top)だけは操作できるようにする）　 new

インラインフレーム内のHTML文書の機能を制限する。
sandboxを指定されたインラインフレーム内のHTML文書は、別オリジンとして扱われ、ここから外部（親も含む）への target 指定が不可になり、フォーム・スクリプト・プラグインが無効になる。なので、あんまり不用意に使わないほうがイイかも。

★制限解除のキーワード（キーワードは「半角スペース」で区切って複数指定OK）

• allow-forms（フォームの機能だけ有効にする）
• allow-scripts（スクリプトだけ有効にする）
• allow-same-origin（親のHTMLと同じオリジンとして扱われる）
• allow-top-navigation（最上位の親 (target_top) だけは操作できるようにする）

このほかグローバル属性も使います

id, class, title, style などのグローバル属性も使えます。
グローバル属性については、「[39] 全要素に使える「HTML5グローバル属性」を見てみよう」をご覧ください。

「https」どうしじゃないとインラインフレーム内に表示できない

インラインフレーム内に 別のドメインのページを表示する時は、絶対パス（http:// や https:// から始まるヤツ）を書けばOK。
なんですが、「https」から始まるサイトは、同じく「https」で始まるサイトじゃないとインラインフレーム内で表示できません。

「https」は「Hyper Text Transfer Protocol over Secure Socket Layer（/transport layer security）」の略で、SSL/TLSによる暗号化通信の機能がついたモノ。
セキュリティ保護がされているサイトです。

そもそも、よそ様のサイトを自分のページに インラインフレームでジカに貼るのは良ろしくないです。Googleマップくらいならいいかもだけど。
他のサイトを紹介したい場合は、リンクという形がベスト。

次回予告

次回は、<object>のときにも出てきた<embed>要素を見てみましょう。
<embed>要素は、プラグインで再生するコンテンツを組み込む要素。
動画、音声、swfなどを組み込むのに使います。

関連記事

• [69-2] Canvasに基本的な図形を描こう
• [69-1] canvas要素でグラフィックスを表示する領域を作ろう
• [68] 動画や音声に字幕やキャプションを表示しよう track要素
• [67]「mediagroup属性」でメディア要素を同期させよう
• [66] 音声をプラグイン無しで組み込もう audio要素・source要素
• [65] 動画をプラグイン無しで組み込もう video要素・source要素
• [64] プラグインで再生されるコンテンツを組み込もう embed要素
• [63] インラインフレームで 他のHTMLファイルを組み込もう iframe要素
• [62] 外部コンテンツを組み込もう　object要素・param要素
• [61] イメージマップ（リンク領域）を作ろう　map要素・area要素
• （ちょっとメモ）属性の「引用符」や「値」の省略について
• （ちょっとメモ）HTML5 での 省略可能なタグについて
• [60] フォームを美しく整えよう（CSS使用）
• [59] フォームの属性 逆引き一覧 (どの属性がどの部品に使えるか)
• [58] 暗号鍵を作ろう　keygen要素（HTML5.2で削除されました）

Tweet

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)