iframeで各コンテンツを呼び出して表示する事があり、その時にコンテンツに合わせた高さで表示する必要性があったため覚え書き程度で紹介します。
1. 呼び出す側（親）のiframeの書き方
<iframe src="hoge.html"></iframe>
上記のようにまず、iframeで呼び出したいhtmlファイルを指定。
今までの記述だと、[border=”0″]とか[whidth=”980″]、[height=”300″]などごちゃごちゃと記述するのが当たり前になってましたが、主流がHTML5に変わりつつあるので[src=”読み込むファイルパス”]のみの記述でOKです。
2. jQueryライブラリを読込む
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="./js/jquery.min.js"></script>
1行目のCDNを利用したjQueryライブラリの読み込み方法か、2行目のサーバーにjQueryライブラリファイルをアップして読み込む方法のどちらかでjQueryを読み込みます。
3. iframe内のコンテンツの高さを取得して、iframeに設定
<script>
$(function(){
var IframeWidth=$('iframe').contents().find('body').width();
var IframeHeight=$('iframe').contents().find('body').height();
$('iframe').css({width:IframeWidth,height:IframeHeight});
});
</script>
この様に記述するだけでiframeで読み込み先のコンテンツの横幅と高さを取得し、iframeにスタイル設定してしまおう！という事です。
また、同じページ内にiframeが複数ある場合は下記に様に記述します。
<script>
$(function(){
$('iframe').each(function(){
var IframeWidth=$(this).contents().find('body').width();
var IframeHeight=$(this).contents().find('body').height();
$(this).css({width:IframeWidth,height:IframeHeight});
});
});
</script>
あとは、枠線やスクロール等調整をCSSで記述します。
iframe{
border: 0;
overflow: hidden;
}
これで全て完了です。
全然たいした事なかったですね。
有難うございます。
記事がとても参考になります！
根本様
記事をご覧いただいてありがとうございます。
参考にして頂けた事うれしく思います！