如何从 iframe 内部使用 javascript 获取 iframe 的高度？具有多个 iframe 的页面呢？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5087278/
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 get the height of an iframe with javascript from inside the iframe? What about pages with multiple iframes?
提问by VKen
Is there a way to detect the height and width of an iframe, by executing a script from inside the iframe? I need to dynamically position some elements in the iframe according to the different height/width of the iframe.
有没有办法通过从 iframe 内部执行脚本来检测 iframe 的高度和宽度？我需要根据 iframe 的不同高度/宽度在 iframe 中动态定位一些元素。
Would there be any difference if there are multiple iframes in the same page? i.e. each iframe wants to find its own dimensions.
如果在同一个页面中有多个 iframe 会有什么区别吗？即每个 iframe 都想找到自己的尺寸。
Javascript or jquery solutions welcomed.
欢迎使用 Javascript 或 jquery 解决方案。
Thanks!
谢谢！
<iframe src='http://example.com' width='640' height='480' scrolling='no' frameborder='0' longdesc='http://example.com'></iframe>
The iframes have to be embeded on other sites, and as mentioned by one of the answers below, I've hit permission problems.
iframe 必须嵌入其他网站，正如下面的一个答案所提到的，我遇到了权限问题。
采纳答案by Paul D. Waite
If your iframe's page and its parent page are served from different domains (meaning you can't access the parent page's DOM properties from the iframe page), then I think it's the same as when you're trying to work out the viewport height.
如果您的 iframe 页面及其父页面来自不同的域（意味着您无法从 iframe 页面访问父页面的 DOM 属性），那么我认为这与您尝试计算视口高度时相同。
For that, see:
为此，请参阅：
Or possibly this:
或者可能是这样的：
回答by Julian Jelfs
Be aware that code like this:
请注意，像这样的代码：
var thisIframesHeight = window.parent.$("iframe.itsID").height();
will only be safe if the source of the iframe and parent window are from the same domain. If not you will get permission denied problems and you will have to take another approach.
只有当 iframe 和父窗口的源来自同一个域时才会安全。如果不是，您将遇到权限被拒绝的问题，您将不得不采取另一种方法。
回答by Anri?tte Myburgh
Each <iframe>would need an idI suppose. And then inside the <iframe>you would reference it like this:
我想每个人<iframe>都需要一个id。然后在里面<iframe>你会像这样引用它：
var thisIframesHeight = window.parent.$("iframe#itsID").height();
回答by ddlab
may be a bit late, as all the other answers are older :-) but... here′s my solution. Tested in actual FF, Chrome and Safari 5.0.
可能有点晚了，因为所有其他答案都比较旧:-) 但是......这是我的解决方案。在实际 FF、Chrome 和 Safari 5.0 中测试。
css:
css：
iframe {border:0; overflow:hidden;}
javascript:
javascript:
$(document).ready(function(){
$("iframe").load( function () {
var c = (this.contentWindow || this.contentDocument);
if (c.document) d = c.document;
$(this).css({
height: $(d).outerHeight(),
width: $(d).outerWidth()
});
});
});
Hope this will help anybody.
希望这会帮助任何人。
回答by Valentin Kantor
yes, you can execute parent's window function from inside the frame, and pass parameters, like this:
是的，您可以从框架内部执行父窗口函数，并传递参数，如下所示：
window.parent.FUNC_NAME(iframe_height,iframe_width)
just remember to define function FUNC_NAME in the parent window
只记得在父窗口中定义函数 FUNC_NAME
