[英]auto re-sizing iframe that dynamically changing height (smaller or bigger)
I know there's a lot of post about re-sizing iframe
but all i found is this code: 我知道有很多关于调整iframe
大小的文章,但是我发现的只是这段代码:
<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? 当我单击index.php
页面的链接时,iframe的大小调整为800px
,然后我单击profile.php
页面的链接,并将iframe
大小调整为1200px
但这是我的问题,当我再次单击index.php
的链接时index.php
的高度小于profile.php
页面, iframe
不能调整大小,也无法适应800px
高度,并且它导致index.php
内容的下方有多余的空间,效果不好,我没有增加iframe高度时出现问题,但在缩小时却遇到了麻烦,有人可以帮我吗? any help is appreciated. 任何帮助表示赞赏。 thanks! 谢谢!
Why not just do: 为什么不做:
height: auto;
max-height: 1200px;
On the iframe itself within style="" or thru a css doc. 在iframe本身的style =“”内,或通过CSS文档。
If height is set to auto, then it won't need to use the 1200px for the index.php. 如果将height设置为auto,则index.php无需使用1200px。 But when displaying the profile.php it's allowed to use a maximum of 1200px. 但是在显示profile.php时,允许使用最大1200px。
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. 问题似乎是使用scrollHeight和scrollWidth,它们有意返回滚动条的当前或所需空间,该空间不等于文档本身的大小。
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? 这对您可行,还是不受您控制?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.