这是我到目前为止使用此帖子的内容:
Make iframe automatically adjust height according to the contents without using scrollbar?
问题是函数resizeIframe()在再次调用后似乎没有改变.框架尺寸不变.
这是我的完整代码:
function resizeIframe(obj) {
obj.style.height = obj.contentwindow.document.body.scrollHeight + 'px';
}
$(document).ready(function() {
// change iframe based on drop down menu //
$('#dropdown').click(function(){
$('iframe').slideUp("slow");
$('iframe').attr('src', 'preview.PHP?frame=off&sid='+$(this).val());
resizeIframe(document.getElementById('previewframe'));
$('iframe').slideDown('slow');
});
}
这是我的HTML
<iframe id="previewframe" src="preview.PHP?frame=off&sid=1" style="width: 100%; overflow-x: hidden; overflow-y: scroll" onl oad='javascript:resizeIframe(this);'>
</iframe>
请在回答之前阅读此编辑
编辑:所以我离成功还差几步,但我还没有到那儿.
因此,在iframe源html中,我将此代码嵌入了主体的底部:
<script type="text/javascript">
parent.AdjustIframeHeight(parseInt(document.getElementById("body").scrollHeight));
</script>
<iframe name="previewframe" id="previewframe" src="preview.PHP?frame=off&sid=1" style="width: 100%; overflow-x: hidden; overflow-y: scroll;">
</iframe>
<script type="text/javascript">
function AdjustIframeHeight(i) {
alert("CHANGING: " + parseInt(i));
document.getElementById('previewframe').style.height = parseInt(i) + "px";
alert("Current value: " + document.getElementById('previewframe').style.height);
}
</script>
因此,一切正常,将正确的值发送到警报,第二个警报发送回最初传递的值,但实际帧高没有变化.
真正奇怪的是,如果我打开控制台,然后手动输入:
document.getElementById('previewframe').style.height = "800px";
它会完美地工作.因此,这使我相信浏览器仅需要以某种方式更新设置的高度.
解决方法:
我遇到了这个问题.这就是我使它起作用的方式.
myiframe.css('visibility', 'hidden' );
myiframe.css('height', '1px' );
myiframe.css('height', myiframe.contents().height() ); // get the size of the iframe content height.
myiframe.css('visibility', 'visible' );
我想到了隐藏它并使之可见的想法,是从这个link开始的,但这并不是单独起作用的.我从document.getElementById(id).style.height切换到myiframe.css()并成功了.