自动调整大小的iframe，动态改变高度（更小或更大） [英] auto re-sizing iframe that dynamically changing height (smaller or bigger)
问题描述
我知道有很多关于重新调整 iframe 的帖子，但是我发现的只是这段代码：
< script type =text / javascriptlanguage =JavaScript>
<！ -
function autoResize（id）{
var newheight;
var newwidth;
if（document.getElementById）{
newheight = document.getElementById（id）.contentWindow.document.body.scrollHeight;
newwidth = document.getElementById（id）.contentWindow.document.body.scrollWidth;
}
document.getElementById（id）.height =（newheight）;
document.getElementById（id）.width =（newwidth）;
};
// - >
< / script>
以下是示例标记代码：
< a href =index.phptarget =content>主页< / a>
< a href =profile.phptarget =content>个人资料< / a>
以上代码正在工作，但我遇到了一个问题。考虑这种情况：
index.php页面高度是800px
和
profile.php页面高度为1200px
当我点击链接到 index.php 页面时， iframe的大小调整为<code> 800px ，然后点击链接到 profile.php 页面和 iframe 调整大小为 1200px 但这是我的问题，当我再次点击链接到 index.php 它的高度小于 profile.php 页面， iframe 没有调整大小，也不是调整 800px 的高度，结果会在 index.php 的内容之下留下额外的空间，我在增加iframe高度方面没有问题，但在收缩时遇到了一些麻烦，任何人都可以帮我一把吗？任何帮助表示赞赏。感谢！
我转载了这个问题。是使用scrollHeight和scrollWidth，它们通过意图返回滚动条的当前或所需空间，这不等于文档本身的大小。
问题当我改变的时候，我就会消失。
newheight = document.getElementById（id）.contentWindow.document.body.scrollHeight;
newwidth = document.getElementById（id）.contentWindow.document.body.scrollWidth;
转换为
newheight = document.getElementById（id）.contentWindow.document.body.style.height;
newwidth = document.getElementById（id）.contentWindow.document.body.style.width;
是否适合您，或者您不能控制它？
I know there's a lot of post about re-sizing iframe but all i found is this code:
<script type="text/javascript" language="JavaScript">
<!--
function autoResize(id) {
var newheight;
var newwidth;
if (document.getElementById) {
newheight = document.getElementById(id).contentWindow.document.body.scrollHeight;
newwidth = document.getElementById(id).contentWindow.document.body.scrollWidth;
}
document.getElementById(id).height = (newheight);
document.getElementById(id).width = (newwidth);
};
//-->
</script>
and this is the sample mark-up code:
<a href="index.php" target="content">Home</a>
<a href="profile.php" target="content">Profile</a>
<iframe src="index.php" name="content" height="500px" width="100%" id="Main_Content" onload="autoResize('Main_Content');"></iframe>
those codes above are working, but I have one problem. consider this scenario:
index.php page height is 800px
and
profile.php page height is 1200px
when i click on the link to index.php page, the iframe resizes to 800px, and then I click the link to profile.php page and the iframe resizes to 1200px BUT this is my problem, when I click again the link to index.php which is the height is smaller than the profile.php page, the iframe is not resizing and not adapting the 800px height and it results in excess space below the content of the index.php which is not looking good, I do not have a problem on growing an iframe height but having some trouble on shrinking it,anyone can give me a hand? any help is appreciated. thanks!
I reproduced the problem.
The problem seems to be the use of scrollHeight and scrollWidth which by intention return the current or needed space of the scrollbar, which is not equal to the size of the document itself.
The problem goes away for me when I change
newheight = document.getElementById(id).contentWindow.document.body.scrollHeight;
newwidth = document.getElementById(id).contentWindow.document.body.scrollWidth;
into
newheight = document.getElementById(id).contentWindow.document.body.style.height;
newwidth = document.getElementById(id).contentWindow.document.body.style.width;
is that doable for you, or is this not under your control?
这篇关于自动调整大小的iframe，动态改变高度（更小或更大）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
