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

最終更新日:2019年01月30日  (初回投稿日:2013年12月06日)

<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ファイルを指定するのが基本形です。
サイズを指定しなければ、デフォルトサイズ (300px×150px)になります。

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

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

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

width属性、height属性を使います。
この属性は、img、iframe、embed、object、video要素などでサイズ指定に使えま。単位はピクセルと決まっていて、%はHTML5で廃止になりました。
値は単位無し(ピクセルと決まっているので)で整数値(マイナスは不可)で書きます

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

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

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

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

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

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

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

<!--インラインフレーム内の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とか、ほかのキーワードで使ってるから。らしいです)

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

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

下のサンプルでは、src属性を使わないで <iframe>要素を置いておき、そこにリンクのHTMLを表示させようとしています。
このように、<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 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) は操作できるようにする

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

●サンプル6:sandbox="allow-top-navigation"を試してみたサンプル

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

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

sandboxの値に「allow-top-navigation」を指定したもの。
今度は target設定が有効になっていますね。最上位の親(target_top)は操作できるようになったからです。

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

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

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

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

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

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

HTML5 で省略できる開始終了タグ(<!DOCTYPE html> <html> <head><body>)は省略OK。また、 <title>要素もsrcdoc属性値の中では省略可能だそうで、結局 <body>の中身だけ書けば良いのだそうです。
また「"」と「&」 は文字参照の「&quot;」「&amp;」と書く必要があるそうです。

サンプルのHTMLは下のようになっています。
未対応ブラウザでは、src属性で指定したHTMLファイルが表示され、
対応ブラウザでは、srcdoc属性のソースが優先されこれに上書きされます。

<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などを組み込むのに使います。

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

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

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

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

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 | 2023/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
Profile

yuki★hata

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

メールフォームはこちら

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