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

我认为每个<iframe>都需要一个id。然后在<iframe>内你会像这样引用它：

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

Answer 4

可能有点晚了，因为所有其他答案都比较旧:-)但是......这是我的解决方案。在实际的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 5

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

window.parent.FUNC_NAME(iframe_height,iframe_width)

请记住在父窗口中定义函数FUNC_NAME

如何从iframe中使用javascript获取iframe的高度？那些包含多个iframe的网页呢？

5 个答案: