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

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

この記事のポイント

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

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

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

HTML コード例

<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を指定して、外部ファイルを読み込みます。

HTML コード例

<h1>iframe要素の使用例</h1>
<iframe src="https://yellow.gray-code.com/" width="600" height="400"></iframe>

読み込んだページの長さが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属性とセットで使用されることが多いです。

HTML コード例

<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>

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

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

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

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

コメントありがとうございます！
運営の参考にさせていただきます。