HTML 【 インライン・フレーム 】 ~ iframe要素

WWW Website Online Internet Web Page Concept

iframe要素は、インライン・フレームを作るための要素です。
frameset要素やframe要素など、以前はフレームに関する要素が他にもありましたが、HTML5から使用できなくなり、iframe要素だけが残っている状況です。
今回は、他のHTMLファイルを組み込む際に使われるiframe要素についてまとめたいと思います。

目次

1.iframe要素
2.インライン・フレームの配置方法
3.target属性
4.インライン・フレーム内に表示させる
5.iframe要素の属性一覧

1.iframe要素

iframe要素は、インライン・フレームを作るための要素です。
インライン・フレームとは、HTMLファイル内に部分的に領域を作って、そこに別のHTMLファイルを入れ子にして取り込む表示方法です。
object要素でもHTMLファイルを組み込めますが、HTMLファイルを組み込む場合は、iframe要素がより適している要素です。

使用する要素 <iframe>~</iframe>
iframe要素の属性 src属性 組み込むHTMLファイルのURL
name属性 targetで指定される名前を指定
width属性 インラインフレームの幅をピクセルで指定
height属性 インラインフレームの高さピクセルで指定
srcdoc属性 組み込むHTMLファイルをURLでなくソースで指定
sandbox属性 組み込むHTMLファイルの機能を制限する
グローバル属性 id属性、class属性、title属性、style属性など

▲目次へ戻る

2.インライン・フレームの配置方法

インライン・フレームを設置する時は、iframe要素のsrc属性で、別のHTMLファイルを指定します。
サイズを指定しなければ、ブラウザのデフォルトサイズになります。

htmlコードは、以下の通りです。

<iframe src=”http://www.recipi.jp/”></iframe>

 
サイズを指定(width=”300px” height=”150px”)すると、このようになります。

htmlコードは、以下の通りです。

<iframe src=”http://www.recipi.jp/” width=”300px” height=”150px”></iframe>

▲目次へ戻る

3.target属性

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

target=”キーワード”で、ウィンドウまたはインライン・フレームを指定します。
次の5つのキーワードが選択できます。

_blank 新規のウィンドウ(または新規のタブ)に表示
_self 現在と同じウィンドウ(フレーム)に表示
デフォルト値
_parent すぐ上の親ウィンドウ(フレーム)に表示
_top フレームを解除してウィンドウ全体に表示(=最上位のウィンドウに表示)
ウィンドウ(フレーム)名 その名前のウィンドウ(フレーム)に表示
(name属性で名前を付けておく)

上の例では、インライン・フレーム内のHTMLファイルのリンクにはtarget属性を指定していないので、同じフレーム内にリンク先が表示されます。

▲目次へ戻る

4.インライン・フレーム内に表示させる

 
インライン・フレームをターゲットにすると、次のように表示されまます。
このリンクをクリックしてください。

htmlコードは、以下の通りです。

<a href=”http://www.recipi.jp/” target=”t_frame”>このリンクをクリックしてください。</a>
<iframe name=”t_frame”></iframe>

ターゲットにするiframe要素にname属性で名前を付けて、リンクを設定するa要素のtarget属性で、その名前を指定します。
この名前は、半角英数字で任意に付けられますが、アンダーバー(_)から始まる名前は付けられません。
target属性で指定する際に、キーワードと紛らわしくなるからだと思います。

iframe要素でsrc属性を使用していないので、リンクをクリックする前は何の表示もないフレームです。
違和感があるので、このようなフレームを実際に設置する時は、iframe要素のsrc属性を指定するなど、何らかの表示があった方が良いと思います。

▲目次へ戻る

5.iframe要素の属性一覧

src=”URL”
インライン・フレームに組み込むHTMLファイルのURLを指定

<iframe src=”news.html”></iframe> 

name=”名前”
親ページの要素のtarget属性の指定で使用するため、任意の名前を指定

<iframe src=”news.html” name=”news”></iframe> 

width=”インライン・フレームの幅”、height=”インライン・フレームの高さ”
インライン・フレームの幅、高さをピクセルで指定
(指定しない場合は、ブラウザのデフォルトのサイズとなる)

<iframe src=”news.html” name=”news” width=”300″ height=”150″></iframe> 

srcdoc=”HTMLソース”
インライン・フレームに組み込むHTMLのソースを直接書く

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

sandbox
sandbox=”allow-forms”
sandbox=”allow-scripts”
sandbox=”allow-same-origin”
sandbox=”allow-top-navigation”
インライン・フレーム内のHTML文書の機能を制限する
sandboxを指定されたインライン・フレーム内のHTML文書は、別ドメインの文書として扱われ、ここから外部(親も含む)へのtarget指定ができなくなり、フォーム、スクリプト、プラグインが無効となる(よって、注意が必要)

制限解除のキーワード(半角スペースで区切って複数指定可能)
allow-forms(フォームの機能だけ有効にする)
allow-scripts(スクリプトの実行だけ有効にする)
allow-same-origin(親と同じドメインの文書として扱われる)
allow-top-navigation(最上位のウィンドウだけは操作できるようにする)

この他に、id属性、class属性、title属性、style属性などのグローバル属性も使います。
(グローバル属性についてはHTML5 【 グローバル属性 】 ~ 全ての要素で使える属性もご参照下さい。)

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です