ページの一部分にほかのHTMLを表示したい
ページ内に別のHTMLを読み込みたいときで、読み込んでいることがわからないようなデザインにしたとき<iframe>タグを使ってHTML内に別のHTMLを読み込みます。このテクニックは、あたかも通常のページのように見せるように見た目にわからないんで気が付きませんが、サイトの更新情報やアンケートフォーム、またはその集計結果など、サーバー側のプログラムで自動的に生成するコンテンツをページ内に組み込みたいときにとられる手法です。
HTML index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
iframe{
border:none;
}
</style>
</head>
<body>
<main>
<section class="info">
<h1>サーバーメンテナンス・障害情報</h1>
<iframe src="./sub.html" width="100%" id="inner-frame"></iframe>
</section>
<div>
<p>お問い合わせ：tel 00-0000-1111</p>
</div>
</main>
</body>
</html>HTML sub.html
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
.report{
overflow: hidden;
margin: 0;
}
.report-list{
margin: 0;
}
.report h2{
font-size: 1em;
}
.report p{
font-size: 0.85;
}
</style>
</head>
<body class="report">
<main>
<ul class="report">
<li><a href="#0810">サーバーメンテナンスのお知らせ</a></li>
<li><a href="#0720">メール送受信障害</a></li>
</ul>
<article id="0810">
<h2>サーバーメンテナンスのお知らせ</h2>
<p>8月10日2時00分から5時00分の間、セキュリティ対策のためサーバーメンテナ ンスを行います。対象のサーバーはABC01、ABC02、ABC03、ABC04、ABC05です。ご利用 中の皆様にはご迷惑をおかけしますが、ご理解のほどお願い申し上げます。 </p>
</article>
<article id="0720">
<h2>メール送受信障害 </h2>
<p>7月20日1時24分から2時10分まで、ABC01 サーバーにてメールの送受信がし づらい状態が発生しておりました。 ご利用の皆様には大変ご迷惑をおかけいたしました。</p>
</article>
<div class="contact">
<h2> 管理会社 </h2>
<p><a href="http://studio947.net" target="_top">株式会社Studio947 </
</div>
</main>
</body>
<script>
document.addEventListener('DOMContentLoaded', function(){
var iframe = window.parent.document.getElementById('inner-frame');
iframe.style['height'] = document.body.scrollHeight + 'px';
});
</script>
</html>このサンプルにはJavaScriptを組み込む必要がある。
読み込んだことがわからないように別のHTMLを表示させるには、サブHTMLに、Javascriptプログラムを組み込む必要があります。このJavaScriptは、スクロールしなくてもすべてが表示されるように、サブHTMLコンテンツの長さに合わせてベースページの<iframe>の高さを調整しています。