如何从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属性),那么我认为它与您尝试计算视口高度时相同.

为此,请参阅:

• 使用JavaScript获取浏览器视口尺寸

或者可能这样:

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

Answer 2

请注意这样的代码:

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

只有iframe和父窗口的来源来自同一个域时才会安全.如果不是,您将获得许可被拒绝的问题,您将不得不采取另一种方法.

Answer 3

可能有点晚了，因为所有其他答案都比较旧:-)但是...here\xc2\xb4s我的解决方案。在实际 FF、Chrome 和 Safari 5.0 中测试。

\n\n

CSS：

\n\n

iframe {border:0; overflow:hidden;}\n

\n\n

javascript:

\n\n

$(document).ready(function(){\n    $("iframe").load( function () {\n        var c = (this.contentWindow || this.contentDocument);\n        if (c.document) d = c.document;\n        $(this).css({\n            height: $(d).outerHeight(),\n            width: $(d).outerWidth()\n        });\n    });\n});\n

\n\n

希望这对任何人都有帮助。

\n