HTML & CSS

レシピ

レイアウト

ページの中に他のHTMLを読み込んで表示する

iframe要素を使って、HTMLページに他のHTMLファイルを読み込んで表示する方法を解説します。

この記事のポイント

  • iframe要素を使ったページ読み込み方法が分かる
  • 読み込んだページに許可する動作を指定する

目次

外部ファイルを読み込むiframe要素

iframe要素は「inline frame」の略で、フレームの中に別ページを読み込んで表示するときに使用します。
GoogleMapの埋め込みで使われるケースが多いかもしれません。

GoogleMapを埋め込んでいる例
GoogleMapを埋め込んでいる例

コード例

<h1>iframe要素の使用例</h1>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4835.415489235314!2d139.48408501305363!3d35.92292470733082!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018da6141acb0ad%3A0xb93b6f615532ff61!2z5pmC44Gu6ZCY!5e0!3m2!1sja!2sjp!4v1532789954640" width="600" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>

上記のコードはGoogleMapの「共有」からソースを貼り付けただけですが、iframe要素はこのようにURLを指定して外部からページを読み込んだりすることができます。

今回はiframe要素を使ったページ読み込みについて解説していきます。

URLを指定してページを読み込む

iframe要素src属性にURLを指定して、外部ファイルを読み込みます。

コード例

<h1>iframe要素の使用例</h1>
<iframe src="https://yellow.gray-code.com/" width="600" height="400"></iframe>
URL指定でページを埋め込む例
URL指定でページを埋め込む例

読み込んだページの長さがiframe要素の枠内に治らない場合は、自動的にスクロールバーが表示されます。

相対パスを使って読み込む

iframe要素はURL以外にも、同じサーバー内にあるファイルを相対パスで指定して読み込むことができます。

例えば、次のような読み込むHTMLファイルを用意して、読み込みを行うHTMLと同階層に設置したとします。

test.html(読み込むファイル)

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSSで枠線(ボーダー)をデザインする</title>
<link rel="stylesheet" href="css/reset.css">
<style>
body {
	margin: 0; padding: 0; font-size: 100%; background: #f7f7f7;
}
section {
	margin: 20px auto;
	padding: 20px;
	width: 460px;
	border-radius: 10px;
	border: 1px solid #007bd1;
}
</style>
</head>
<body>
<section>
	<p>他のHTMLを読み込む</p>
</section>
</body>
</html>

index.html(iframeを設置するHTML)

<iframe src="./test.html" width="600" height="100"></iframe>
相対パスでページを埋め込む例
相対パスでページを埋め込む例

読み込んだページの長さがiframe要素の枠内に治らない場合は、自動的にスクロールバーが表示されます。

srcdoc属性でHTMLを読み込む

iframe要素にはsrc属性の他に、srcdoc属性というソースコードを指定する方法があります。
この属性はsandbox属性とセットで使用されることが多いです。

コード例

<h1>iframe要素の使用例</h1>
<iframe src="./index53_b.html" srcdoc="
<p>フォームを読み込む</p>
<form action='' method='post'>
	<input type='text' name='your_name' value=''>
	<input type='submit' name='btn' value='送信'>
</form>" sandbox="allow-forms"></iframe>
srcdoc属性でHTMLを読み込んでいる例
srcdoc属性でHTMLを読み込んでいる例

sandbox属性は読み込んだコンテンツの挙動を制御するために指定します。
主に次のような値を指定することができ、半角スペースで区切って複数指定することも可能です。

許可する動作内容
allow-formsフォームの実行を許可する
allow-modalsモーダルウィンドウを開くことを許可する
allow-orientation-lockスクリーンの向きロック機能を無効化することを許可する
allow-popupsポップアップ(target=”_blank”など)を許可
allow-scriptsJavaScriptなどスクリプトの実行を許可する

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。