首先 由于谷歌与opera浏览器的安全问题对iframe的操作需要服务器环境！所以以下文件都是运行在服务器环境下的。
<body>
<h3>下面是iframe</h3>
<iframe id="controller-father" name="controller-father" src="children-iframe.html" frameborder="1"></iframe>这个iframe的高度设置的js写在父页面里！ <iframe id="controller-children" src="father-iframe.html" frameborder="1"></iframe>这个iframe的高度设置的js写在子页面里！ <script type="text/javascript"> window.οnlοad=function(){ var ifm=document.getElementById('controller-father');
var subWeb = document.frames ? document.frames["controller-father"].document : ifm.contentDocument;
//document.frames ? document.frames["controller-father"].document这个是兼容IE的； 其他用 ifm.contentDocument； if(ifm != null && subWeb != null) { ifm.style.height = subWeb.body.offsetHeight+50+'px'; // ifm.style.height = subWeb.body.scrollHeight+50+'px';这个两个设置高度的方法都能用;也可设置写为：ifm.height=...;这个就不用加 ‘px’单位了。
} } </script>
</body>
现在先设置一个看看效果！
ok！
下面进行在子页面里控制iframe的高度！
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-1.11.1.min.js"></script></head><body> <p>我是子页面,在父页面里控制它的iframe的高度</p> <p>我是子页面,在父页面里控制它的iframe的高度</p> <p>我是子页面,在父页面里控制它的iframe的高度</p> <p>我是子页面,在父页面里控制它的iframe的高度</p> <p>我是子页面,在父页面里控制它的iframe的高度</p> <p>我是子页面,在父页面里控制它的iframe的高度</p> <p>我是子页面,在父页面里控制它的iframe的高度</p> <p>我是子页面,在父页面里控制它的iframe的高度</p> <script type="text/javascript"> var ifm=window.parent.document.getElementById('controller-children');//在子页面里获取父页面的iframe元素 ifm.style.height=window.document.body.offsetHeight+50+'px'; </script></body></html>
效果图
iframe加载正常但是一片空白，html的posotion属性不能是relative
转载于:https://www.cnblogs.com/websjs/p/5688361.html
