iframeで別ページを表示すると、別ページの高さがわからずスクロールバー表示されます。
JavaScriptを使ってiframeで表示する別ページの高さを取得し、取得した高さをiframeタグに設定しスクロールバーが表示されないようにする方法をご紹介します。
Contents
iframe先ページの高さにあわせてコンテンツを表示するCSS記述
※iframeのCSS記述です。必要に応じて変更して下さ。
<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記述例
※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>
iframe先ページの高さにあわせてコンテンツを表示するHTML記述例
<div class="clWrap"> <iframe src="/about/" scrolling="no" frameborder="0"></iframe> </div> <!--/clWrap-->
contentWindow、scrollHeightを使ってiframe先ページの高さにあわせて表示するデモページ
contentWindow、scrollHeightを使ってiframe先ページの高さにあわせて表示するデモ
今回の方法って、SNS関連のウィジェットやブログパーツ的なものを提供したサービスでは使えそうですね。
上記以外の普通のWEBサイトページ等にiframeを使うとあまり良い印象がないです。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告