Edited at

iframe内のコンテンツサイズに応じて、frameの高さを動的に変更する方法

More than 3 years have passed since last update.

iframe内のコンテンツサイズに応じて、frameの高さを動的に変更する方法

docFrame.contentDocument.body.scrollHeight

でも

docFrame.contentWindow.document.body.scrollHeight

でもサイズ取得できた。contentWindowがw3c基準でない。

動作確認バージョン


  • IE9

  • Chrome 39.0

  • FireFox 33


aaa.html

<!DOCTYPE HTML>

<html>
<script type="text/javascript">
<!--
function change_frame_height(frm){
var contentsHeight;
var docFrame = document.getElementById(frm);
try{
contentsHeight = docFrame.contentWindow.document.body.scrollHeight;
}catch(e){}
if(!isNaN(contentsHeight) && !contentsHeight == 0){
docFrame.height = contentsHeight;
}else{
docFrame.height = 120;
docFrame.scrolling="auto"
}
}
//-->
</script>
<head>
</head>
<body>
<table border="3">
<tr>
<td>lt</td><td>ct</td><td>rt</td>
</tr>
<tr>
<td>l</td>
<td>
<iframe id="newsframe" onLoad="change_frame_height(this.id)"
frameborder="0" width="100%" marginheight="0"
marginwidth="0" scrolling="no" src="bbb.html">
</iframe>
</td>
<td>r</td>
</tr>
<tr>
<td>lb</td><td>cb</td><td>rb</td>
</tr>
</table>
</body>
</html>


bbb.html

aaaa</br>

aaaa</br>
aaaa</br>
aaaa</br>
aaaa</br>
aaaa</br>
aaaa</br>