这是我目前为止所拥有的,使用这篇文章:
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" onload='javascript:resizeIframe(this);'>
</iframe>
请在回答前阅读此修改内容
编辑:所以我离成功又近了一些,但我还没有成功。
所以在 iframe 源 html 中,我将其嵌入到 body
的底部:
<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() 并且它起作用了。
关于javascript - 使用 jQuery 事件调整 contentWindow 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28143841/