現代のウェブ開発において、iframeを使用して異なるページのコンテンツを組み込むケースは少なくありません。特に、ブログパーツやSNSウィジェットなどの組み込みでは、iframeの利用は避けられない側面があります。しかし、iframeを使う際に直面する問題の一つが、組み込むページの高さに応じた自動調整です。高さの違いが原因でスクロールバーが表示されると、デザイン的にも使い勝手の面でもネガティブな影響を与えかねません。
本記事では、この問題を解決するためのCSSとJavaScriptを駆使した簡単な方法をご紹介します。
Iframeの高さ自動調整：CSSコードスニペット
Iframeの組み込みにあたって、まずCSSを適切に設定することが重要です。以下のスタイルは、Iframeを包含するコンテナのサイズを画面幅の80％に設定し、かつスクロールバーが表示されないようにします。また、Iframe自体のスタイルでは、余計な枠を取り除き、幅を100％に設定しています。
<style type="text/css" media="all">
<!--
.clWrap{
width:80%;
margin:0 auto;
overflow:hidden;
border:solid 1px #999999;
}
iframe {
padding:0;
width:100%;
overflow:hidden;
border:none;
}
-->
</style>
Iframeの高さの動的調整：JavaScriptコードスニペット
次に、ページがロードされた後にIframeの高さを動的に調整するJavaScriptの実装を見ていきます。ここでは、jQueryを使用して、Iframeが読み込まれた後にその高さを計算し、Iframeタグに適用する方法を採用します。
jquery.min.js（1.8系）ファイルを読み込みます。iframeをload後、.heightを使って高さを取得してます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$('iframe').load(function(){
if (typeof $(this).attr('height') == 'undefined') {
//iframe先ページの高さを設定
$(this).height(this.contentWindow.document.documentElement.scrollHeight+10);
}
});
//iframe先ページロード中にも対応
$('iframe').triggerHandler('load');
});
</script>
HTMLマークアップの実例：HTMLコードスニペット
実際のHTMLマークアップでは、上記のCSSとJavaScriptを用いて、Iframeを適切に組み込みます。以下の例では、clWrapクラスを持つdiv要素内にIframeを配置し、スクロールバーなしでコンテンツが表示されるようにしています。
<div class="clWrap">
<iframe src="/about/" scrolling="no" frameborder="0"></iframe>
</div>
<!--/clWrap-->
contentWindow、scrollHeightを使ってiframe先ページの高さにあわせて表示するデモページ
これらのコードを実際に動作させるデモページも準備しています。以下のリンクから、Iframe内のコンテンツがどのように自動で高さが調整されるかを確認することができます。
contentWindow、scrollHeightを使ってiframe先ページの高さにあわせて表示するデモ
まとめ
Iframeを使ったページ組み込みは、技術ブログやウィジェット提供サービスには有用ですが、一般的なウェブサイトではUX（ユーザーエクスペリエンス）の観点から避けるべき場合もあります。しかし、今回ご紹介した方法を活用すれば、Iframeの高さをうまくコントロールし、ユーザーにとって快適なページビューを提供することが可能です。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。
