让iframe自适应高度，可以随着窗口的变化而跟着变大或变小。
这种自适应的效果可以让引用的网页风格保持一致，不至于iframe框架和窗口长宽大小不一。
我们首先设置css：
body{margin:0; padding:0;}
如果不设置body的margin和padding为0的话，页面上下左右会出现空白。
引用代码如下：
<iframe src="http://www.webym.net" id="myiframe" scrolling="no" frameborder="0"></iframe>
到目前为止，只是引用了框架，还没有自适应高度。
var ifm= document.getElementById("myiframe");
ifm.height=document.documentElement.clientHeight;
这个方法可以可以获取可视区域高度，但不能侦测浏览器窗口。也就是说只能获取到打开页面时的窗口高度，如果我们缩小了窗口，上面代码是不能动态获取。
所以我们要升级上面的代码。
<iframe src="http://www.webym.net" id="myiframe" scrolling="no" frameborder="0"></iframe>
<script type="text/javascript">
function changeFrameHeight(){
var ifm= document.getElementById("myiframe");
ifm.height=document.documentElement.clientHeight;
}
window.onresize=function(){
changeFrameHeight();
}
</script>
window.onresize的作用就是当窗口大小改变的时候会触发这个事件。
通过这个方法，就可以让框架iframe完美自适应高度了，而且兼容各浏览器。
声明:如需转载，请注明来源于www.webym.net并保留原文链接：http://www.webym.net/jiaocheng/429.html
