親サイトにifremeを入れたときにうまく高さが指定できなかったので
参考になるサイトを探しまくりました。
要件
iframe。よくあるyoutube、googlemapではなく、別のサイトのiframe(クロスドメインと言う)。
iframe側の高さが動的に変わる場合(例:記事のタイトルとか、日によって文字数がかわるやつ)高さを固定すると変にスクロールがついてしまい、見た目が悪い。
iframe使ってるってなるべく気づかれたくないときに活用できる
サンプルコード
<script>
window.addEventListener('message', function(e) {
var iframe = $("#parentframe");
var eventName = e.data[0];
var data = e.data[1];
switch(eventName) {
case 'setHeight':
iframe.height(data);
break;
}
}, false);
</script>
・・・
・・・
<body>
<iframe id="parentframe" src="http://test-foo.com/" frameborder="no" scrolling="no"></iframe>
</body>
<script type="text/javascript">
window.onload = function() {
var height = document.getElementsByTagName("html")[0].scrollHeight;
window.parent.postMessage(["setHeight", height], "*");
}
</script>
tips
#parentfram
iframeにidを指定します。jsの箇所にもお忘れなく。
frameborder="no"
はフレームの枠線の表示を非表示に指定してます
scrolling="no"
はスクロールさせないと言う指定です
ですがどちらもHTML5では廃止されてますのでcssで指定してもいいかと思います。
↑の廃止された指定でも効くっちゃ効きます。
期待する結果
親のiframeにstyle="height: 150px;"
とか、高さが自動で修得されてたら完成です。
<iframe id="parentframe" src="http://test-foo.com/" frameborder="no" scrolling="no" style="height: 150px;"></iframe>
tips
ちなみにheight: 150px
はiframeのデフォルトの高さです
おそらく最小の高さと思われます。
参考サイト
iframeに異なるドメイン(クロスドメイン)のコンテンツを読み込んで高さを自動調節する方法
HTML5タグリファレンス HTML4.01からHTML5へのバージョンアップによる変更点
これらの参考サイトのおかげで本当に助かりました。ありがとうございます
今回は使用してませんがクロスドメインでなければこちらも参考になるかもしれません
iframe の高さが動的に変わっても親画面でスクロールバーを表示させない方法