[63] インライン・フレームで 他のHTMLファイルを組み込もう <iframe>

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

フレームとは、1つのHTML文書を2つ以上に分割し、それぞれに別のHTMLファイルを表示させたものでした。
フレームは、構造が入れ子状なので、親のHTML文書でサイトの内容が分かりづらく、プリントやブックマークに不適切で、
アクセシビリティ的にも、セキュリティ的にもNGだったんです。
(フレームサイトの例として「おくすり110番-ハイパー薬辞典」 このサイト、利用価値大ですが、未だにフレーム…)

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

使用する要素 <iframe> 〜 </iframe>
<iframe>の属性
一覧はこちら
src :組み込むHTMLファイルのURL
name :targetで指定するための名前
width :インラインフレームの幅をピクセルで
height :インラインフレームの高さピクセルで
srcdoc :組み込むHTMLファイルをURLでなくソースで指定
seamless :シームレス モードで表示(HTML5勧告で削除)
sandbox :組み込むHTMLファイルの機能を制限する
グローバル属性

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

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

●サンプル1:インライン・フレームの基本形

src属性で、別のHTMLファイルを指定するのが基本形です。
サイズを指定しなければ、ブラウザのデフォルトサイズになります。
(ブラウザによって違うけど、だいたい300×150pxくらい)

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

サイズを指定すると、こんなかんじ。

<iframe src="smp63_1.html" width="400px" height="100px"></iframe>

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

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

●サンプル2:インライン・フレーム内のHTMLで、target="_top" を指定する

インラインフレーム内のリンクをクリックすると、ウィンドウ全体がサンプルページに切り替わります。
「元のページに戻る」ボタンで戻ってきてね。

このインライン・フレームのソースは先ほどのサンプル1とほぼ同じ。

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

<iframe>のsrc要素で指定したHTMLの<a>要素target属性で「target="_top"」と指定しています。これで、ウィンドウ全体がリンクを開くターゲットになったわけです。

<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属性」の値の「ウィンドウ(フレーム)名」って、
ウィンドウに名前をつけることってあんまりないと思います。_blank、_self、_parent、_topでことが足りてしまうので。
なので、「インライン・フレーム」をターゲットにするために使うのがほとんどかと。
コレを利用するには、ターゲットにする<iframe>要素に「name属性」で名前をつけときます。

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

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

●サンプル3:インライン・フレームに、name="任意の名前" を指定してターゲットにする

下のリンクをクリックしてください。

このように、<iframe>要素に src属性を使わないと、最初はのっぺらぼうのフレームになります。
(src属性は必須じゃないのでこの指定でもOK。ユーザには迷惑だけどね)

<iframe>要素に「name属性」で名前をつけて、ターゲットフレームとして指定してます。
HTMLソースはこのようになっています。

<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 width="570px" height="200px" name="target_box"></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) は操作できるようにする

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

●サンプル6:sandbox="allow-top-navigation"を試してみたサンプル
*Operaは未対応でした(Chrome、Firefox, Safari は対応)

まず sandboxだけを指定したもの。
<iframe>内のHTMLの<a>で「target="_top"」と指定しているので、
本来ならウィンドウ全体にリンク先のHTMLファイルが表示されるはずですが、
クリックしても何も起こりません。

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

sandboxの値に「allow-top-navigation」を指定したもの。
今度は target設定が有効になっていますね。

インラインフレーム内のリンクをクリックすると、ウィンドウ全体がサンプルページに切り替わります。
「元のページに戻る」ボタンで戻ってきてね。

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

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

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

src属性を使わずに、<iframe>要素に直接HTMLソースを書いて表示することもできます。
それには srcdoc属性を使います。これも HTML5 から新しくできた属性です。
*この新属性は今のところ、Chrome と Firefox (ver.25以降) が対応しています。

●サンプル4:インライン・フレームにHTMLソースをジカに書く

<!DOCTYPE html> <html> <head> <title> <body>は省略して、<body>の中身だけ書けば良いのだそうです。HTMLソースはこのようになっています。

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

未対応ブラウザでは、src属性で指定したHTMLファイルが表示され、
対応ブラウザでは srcdoc属性のソースが優先されます。

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

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

が、2014年秋の HTML5勧告で、無くなっちゃってた
草案の頃も対応ブラウザが少なかったそうですが、無くなってしまったんですね seamless属性。
(こちら↓の 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>
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:// から始まるヤツ)を書けばOK。
なんですが、「https」から始まるサイトは表示できません

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

まあ、よそ様のサイトを自分のページに インライン・フレームでジカに貼るのは良くないので、https じゃなくても止めたほうがいいですね。
他のサイトを紹介したい場合は、リンクという形がベストです。

次回予告

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

関連記事
この記事をはてなブックマークに追加

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

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

No title

こちらのサイト初心者の私でもすごく参考になりますね。どうもありがとうございます。これからもいろいろ教えて下さい。

Re: No title

CRESCENT1966 さん
こちらこそ!ありがとうございます。

No title

seamless属性はフレームとしてではなく「同一ページとして読み込まれる」という扱いらしいです。
アクセシビリティ関係でいろいろと調べていたのですが、音声読み上げソフト等はiframeやobjectの部分を正常に読まず、PHP等で直接的に読み込んで一体化したものしか読み上げないソフトが多いとのこと。
そこでiframeにseamless属性をつけてやると、同一ページとして読み込まれるため、正常に読んでくれるんだとか(色んなサイト様の情報をつなぎ合わせただけなので正確ではないかもしれません)。

まぁ、対応しているブラウザがごく一部過ぎて、現段階では正直ほとんど意味はないんですけどね……。

Re: No title

情報収集中さん
貴重な情報ありがとうございます!!
本記事には「borderを消してシームレスに」などと、かなりいい加減なことを書いていましたね(^^;)

コメントを頂いて、記事を修正するために調べてみたところ、
なんと seamless属性は2014年10月の勧告で無くなっていました。
もともとframe自体がアクセシビリティに難ありということで廃止になったので、
iframeなのにシームレス…といった矛盾を打破できなかったのではないでしょうか。

2013年末の投稿以来ずっと放置していた記事でしたので、
コメントをいただかなければ廃止になったことすら気が付きませんでした。
記事を全体的に修正しました。助かりました。ありがとうございます!
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.