[如何从iframe内部使用javascript获取iframe的高度？那有多个iframe的页面呢？

Question

是否可以通过从iframe内部执行脚本来检测iframe的高度和宽度？我需要根据iframe的不同高度/宽度在iframe中动态放置一些元素。

如果同一页中有多个iframe，会有什么区别吗？即每个iframe都希望找到自己的尺寸。

欢迎使用Javascript或jquery解决方案。

谢谢！

<iframe src='http://example.com' width='640' height='480' scrolling='no' frameborder='0' longdesc='http://example.com'></iframe>

iframe必须嵌入到其他网站上，并且如以下答案之一所述，我遇到了权限问题。

Answer 1

如果您的iframe页面及其父页面是从不同的域提供的（这意味着您无法从iframe页面访问父页面的DOM属性），那么我认为它与尝试计算视口时是一样的高度。

为此，请参阅：

• Get the browser viewport dimensions with JavaScript

或者可能是这个：

• http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

Answer 2

请注意这样的代码：

var thisIframesHeight = window.parent.$("iframe.itsID").height();

仅当iframe和父窗口的来源来自同一域时才是安全的。如果没有，您将获得拒绝权限的问题，您将不得不采取另一种方法。

Answer 3

可能会有点晚，因为所有其他答案都比较老：-)，但是...这是我的解决方案。在实际的FF，Chrome和Safari 5.0中进行了测试。

css：

iframe {border:0; overflow:hidden;}

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()
        });
    });
});

希望这会帮助任何人。

Answer 4

我想每个<iframe>都需要一个id。然后在<iframe>中，您可以像这样引用它：

var thisIframesHeight = window.parent.$("iframe#itsID").height();

Answer 5

是的，您可以从框架内部执行父级的window函数，并传递参数，如下所示：

window.parent.FUNC_NAME(iframe_height,iframe_width)

只记得在父窗口中定义函数FUNC_NAME