javascript 如何使用不同高度的页面动态调整 iFrame 的大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5894472/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to dynamically resize an iFrame with pages of different heights?
提问by catandmouse
I am using this code to dynamically resize an iFrame depending on the content of the remote site:
我正在使用此代码根据远程站点的内容动态调整 iFrame 的大小：
http://solidgone.org/Set-IFRAME-height-based-on-size-of-remotely-loaded-content
http://solidgone.org/Set-IFRAME-height-based-on-size-of-remotely-loaded-content
However, on that remote site, there are other pages as well. What happens is that when I click on a link on the remote site (inside the iFrame), the height doesn't change accordingly. Instead it uses the height of the page that we initially set on the iFrame. In this case it uses the height of remote.php (which is quite tall):
但是，在该远程站点上，还有其他页面。发生的情况是，当我单击远程站点（iFrame 内）上的链接时，高度不会相应改变。相反，它使用我们最初在 iFrame 上设置的页面高度。在这种情况下，它使用 remote.php 的高度（相当高）：
<iframe id='local-iframe' width='1' height='1' frameborder='0' scrolling='no' src ='http://remotesite.com/remote.php'></iframe>
</iframe>
Another thing is that, even if I indicated scrolling='no' on the iFrame, once I clicked a link on inside the iFrame, the scroll bars re-appear.
另一件事是，即使我在 iFrame 上指示 scrolling='no'，一旦我单击 iFrame 内部的链接，滚动条就会重新出现。
Is there any solution to this problem? What are we doing wrong?
这个问题有什么解决办法吗？我们做错了什么？
回答by user624385
The code at this site (below) worked for me, though I'm working on getting the border to disappear...
这个网站（下面）的代码对我有用，虽然我正在努力让边界消失......
http://ramanisandeep.wordpress.com/2009/12/16/how-to-dynamically-adjust-an-iframe's-height/
http://ramanisandeep.wordpress.com/2009/12/16/how-to-dynamically-adjust-an-iframe's-height/
Insert iframe on page
在页面上插入 iframe
<iframe scrolling='no' frameborder='0' id='frmid' src='getad.aspx'
onload='javascript:resizeIframe(this);'>
</iframe>
Use this javascript to resize iframe based on the height & width of child page
使用此 javascript 根据子页面的高度和宽度调整 iframe 的大小
<script language="javascript" type="text/javascript">
function resizeIframe(obj)
{
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
obj.style.width = obj.contentWindow.document.body.scrollWidth + 'px';
}
</script>
回答by Samuli Hakoniemi
I think you can't directly access IFRAME's content in any possible way nowadays. So therefore you can't directly detect it's height either.
我认为您现在无法以任何可能的方式直接访问 IFRAME 的内容。因此，您也无法直接检测它的高度。
As you can read from the article you're referring to, author has written an update: http://solidgone.org/Redux-Set-IFRAME-height-based-on-size-of-remotely-loaded-content
正如您从您所指的文章中看到的那样，作者写了一个更新：http: //solidgone.org/Redux-Set-IFRAME-height-based-on-size-of-remotely-loaded-content
If I understood correctly, it's making a request with height as parameter on local resource, which would help setting the height.
如果我理解正确，它会在本地资源上以高度作为参数发出请求，这将有助于设置高度。
