例如:
<iframe name="Stack" src="http://stackoverflow.com/" width="740"
frameborder="0" scrolling="no" id="iframe"> ...
</iframe>
我希望它能够根据里面的内容来调整它的高度,而不使用滚动。
例如:
<iframe name="Stack" src="http://stackoverflow.com/" width="740"
frameborder="0" scrolling="no" id="iframe"> ...
</iframe>
我希望它能够根据里面的内容来调整它的高度,而不使用滚动。
当前回答
jq2('#stocks_iframe').load(function(){
var iframe_width = jq2('#stocks_iframe').contents().outerHeight() ;
jq2('#stocks_iframe').css('height',iframe_width); });
<iframe id='stocks_iframe' style='width:100%;height:0px;' frameborder='0'>
其他回答
避免使用内联JavaScript;你可以使用一个类:
<iframe src="..." frameborder="0" scrolling="auto" class="iframe-full-height"></iframe>
用jQuery引用它:
$('.iframe-full-height').on('load', function(){
this.style.height=this.contentDocument.body.scrollHeight +'px';
});
hjpotter92的建议在safari中不起作用! 我对脚本做了一个小的调整,所以它现在也可以在Safari中工作。
唯一的改变是在每次加载时将高度重置为0,以使某些浏览器能够降低高度。
将这个添加到<head>标签:
<script type="text/javascript">
function resizeIframe(obj){
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
并将以下onload属性添加到iframe,如下所示
<iframe onload='resizeIframe(this)'></iframe>
在IE11上试试这个
<iframe name="Stack" src="http://stackoverflow.com/" style='height: 100%; width: 100%;' frameborder="0" scrolling="no" id="iframe">...</iframe>
jQuery的.contents()方法允许我们在DOM树中搜索元素的直接子元素。
jQuery:
$('iframe').height( $('iframe').contents().outerHeight() );
记住,在iframe内的页面主体必须有它的高度
CSS:
body {
height: auto;
overflow: auto
}
我在过去调用iframe时遇到过问题。onload用于动态创建iframe,所以我用这种方法来设置iframe大小:
iFrame视图
var height = $("body").outerHeight();
parent.SetIFrameHeight(height);
主要的观点
SetIFrameHeight = function(height) {
$("#iFrameWrapper").height(height);
}
(这只会工作,如果两个视图在同一个域)