【HTML】iframeの高さを動的に設定する！ #HTML

iframeの高さをiframe内のコンテンツの高さに自動で合わせたい時があるかと思います。

その時は読み込むhtml内で親のiframeの高さを設定してあげましょう。

以下がサンプルコードです。

親側HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<iframe id="parent-iframe" src="children.html"></iframe>
</body>
</html>

子ども側HTML

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#parent-iframe", window.parent.document).height(document.body.scrollHeight);
});
</script>   
</head>
<body style="height:500px;background-color:yellow;">
This is a children.
</body>
</html>