脚本宝典收集整理的这篇文章主要介绍了iframe高度自适应，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
iframe高度
之前用原生jS写的iframe高度自适应方法都失效了，可能是浏览器不支持那样的写法，不过幸好的是还可以依赖jquery来处理
父层页面的结构：
<div class="wrapper">
<h1>这个是一个主页面，里面嵌套了一个iframe页面，iframe能高度自适应</h1>
</div>
<iframe id="iframe1" frameBorder=0 scrolling=no src="test.htML" ></iframe>
方法1：写在父页面上
<script src="//cdn.bootcss.COM/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$('#iframe1').load(function() {
var iframeHeight=$(this).contents().height();
$(this).height(iframeHeight+'px');
});
})
</script>方法2：写在父页面上
<script src="//cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$('#iframe1').css({
width: $(window).width(),
height: $(window).height() - $('.wrapper').height() - 10
})
})
</script>方法3：写在子页面上
<script src="//cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$(window.parent.document).find("#iframe1").load(function() {
var main = $(window.parent.document).find("#iframe1");
var thisheight = $(document).height() + 10;
main.height(thisheight);
})
})
</script>以上是脚本宝典为你收集整理的iframe高度自适应全部内容，希望文章能够帮你解决iframe高度自适应所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。