我正在尝试调整iframe的大小,因为它的内部包含滚动条。由于这不是我想要的结果,因此我一直在尝试调整框架的大小。
我很快就注意到iframe中的页面具有动态高度,根据页面上的内容量在1000到5000+ px之间移动。
我试图使用jQuery来读取页面的大小并根据该大小进行更新,但这被证明是不成功的。
我遇到的解决方案都是使用外部javascript库,而我试图避免这种情况。我只是想确定是否还有其他方法。
<div id="tabMan" class="tabContent hide">
<iframe width="100%" seamless="seamless" style="height: 1020px; border: none; overflow: hidden;" data-animation-speed="2" data-offet-top="0" src="https://www.google.com/"></iframe>
</div>
function resize( frame ) {
var b = frame.contentWindow.document.body || frame.contentDocument.body,
cHeight = $(b).height();
if( frame.oHeight !== cHeight ) {
$(frame).height( 0 );
frame.style.height = 0;
$(frame).height( cHeight );
frame.style.height = cHeight + "px";
frame.oHeight = cHeight;
}
// Call again to check whether the content height has changed.
setTimeout( function() { resize( frame ); }, 250 );
}
window.onload = function() {
var frame,
frames = document.getElementsByTagName( 'iframe' ),
i = frames.length - 1;
while( i >= 0 ) {
frame = frames[i];
frame.onload = resize( frame );
i -= 1;
}
};