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>