iframe要素
iframe要素はインラインフレームを作成しをWebページを入れ子にするための要素です。
src属性にページ内で読み込みたいWebページのアドレスを指定することで、インラインフレーム内に指定したWebページを読み込むことができます。
<iframe src="http://www.webcreativepark.net/html/"></iframe>srcdoc属性でインラインフレーム内のHTMLを直接指定できる事も可能です。
<iframe srcdoc="<p>srcdoc</p>"></iframe>name属性を利用してフレームの名前を指定することができます。a要素などのリンクでフレームの名前をtarget属性に指定することで指定したインラインフレームでページを表示することができます。
<a href="http://www.webcreativepark.net/" target="windowName">link</a>
<iframe src="http://www.webcreativepark.net/html/" name="windowName"></iframe>sandbox属性を指定することでインラインフレームに読み込むコンテンツのセキュリティ制限をかけることができます。
<iframe src="index.html" sandbox></iframe>sandbox属性のみを指定した場合は最上位のセキュリティが施されるが、値にスペース区切りで許可する条件を付加していくことができる。
| allow-forms | フォームの送信を許可 |
|---|---|
| allow-pointer-lock | Pointer Lock APIを許可 |
| allow-popups | target属性やwindow.open()、showModalDialog() の実行の許可 |
| allow-same-origin | 親ウィンドウと同じドメインを許可 |
| allow-scripts | スクリプトの実行を許可 |
| allow-top-navigation | 上位のウィンドウの操作を許可 |
下記のサンプルではインラインフレーム内のスクリプトの実行やフォームの送信は許可されることになる。
<iframe src="index.html" sandbox="allow-forms allow-scripts"></iframe>HTML5で追加されたseamless属性を指定することでインラインフレーム内のページをシームレスにページ内に読み込むことができ、親ドキュメントで指定したCSSを継承できたり、リンクが親ドキュメント内で展開されます(現在の対応ブラウザは調査中。)。
<iframe src="http://www.webcreativepark.net" seamless></iframe>また、width属性やheight属性でインラインフレームの幅や高さを指定することができます。
<iframe src="index.html" width="100" height="100"></iframe>ただし、iPhoneやiPadなどのiOS端末やAndroidの４未満の端末はiframe要素に対する高さ指定を無視しインラインフレームの高さを内部のドキュメントと同じ高さに調整するので注意が必要です。
参考URL
4.8.2 The iframe element - W3C
登録日 : 2013年12月13日 最終更新日 : 2013年12月20日