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

Posted 2023-03-05

【中文标题】如何使用 javascript 从 iframe 内部获取 iframe 的高度？具有多个 iframe 的页面呢？

【英文标题】：How to get the height of an iframe with javascript from inside the iframe? What about pages with multiple iframes?

【发布时间】：2011-07-02 12:25:26

【问题描述】：

有没有办法通过从 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 必须嵌入其他网站，正如以下答案之一所述，我遇到了权限问题。

【参考方案1】：

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

对此，请参阅：

Get the browser viewport dimensions with JavaScript

或者可能是这样的：

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

【讨论】：

谢谢，这给出了 iframe 的尺寸属性。正是我需要的。

window.innerWidth & window.innerHeight 应该也是一个不错的选择。

【参考方案2】：

请注意这样的代码：

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

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

【讨论】：

是的，我遇到了权限问题，因为 iframe 嵌入了其他站点。有没有其他办法？

@VKen：这早就过期了，但是有window.postMessage 可以用来在内部和外部脚本范围之间进行通信，以防它们具有不同的来源。

@RobertKoritnik：谢谢！经过这么多年，我今天学到了一些新东西！ caniuse.com/#feat=x-doc-messaging 和 developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

【参考方案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()
        );
    );
);

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

【讨论】：

如果不是 c.document，d 是未定义的

【参考方案4】：

我想每个<iframe> 都需要一个id。然后在<iframe> 中你会这样引用它：

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

【讨论】：

嗨，我认为这个答案很好。你还知道其他不需要ID的方法吗？

不，我不这么认为，如果您在 <iframe> 内部工作，则不会。如果您正在使用父文档，那么可以，还有其他几种方法。

【参考方案5】：

是的，你可以从框架内部执行父窗口函数，并传递参数，像这样：

window.parent.FUNC_NAME(iframe_height,iframe_width)

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