能否让iframe自行调整大小而无需主窗口协助？

Question

主窗口和 iframe 在同一个域中，但我想实现的是仅在 iframe 内部使用 JavaScript 调整 iframe 的大小以适应其内容。

我也不知道由主窗口分配给它的 iframe 的 ID。而且我不想使用 jQuery 或任何其他框架来完成这个需求。

- rsk82

Answer 1

如果你不知道父窗口中iframe的id，也可以这样做：

window.frameElement.style.width = iframeContentWidth + 'px';
window.frameElement.style.height = iframeContentHeight + 'px';

请参见MDN中的frameElement。

编辑

如果iframe恰好位于具有固定大小和overflow: hidden属性的容器元素中，则可以进行以下操作：

function resizeIframe (iframeContentWidth, iframeContentHeight) {
    var container = window.frameElement.parentElement;
    if (container != parent.document.body) {
        container.style.width = iframeContentWidth + 'px';
        container.style.height = iframeContentHeight + 'px';
    }
    window.frameElement.style.width = iframeContentWidth + 'px';
    window.frameElement.style.height = iframeContentHeight + 'px';
    return;
}

- Teemu

Answer 2

假设您在主窗口中只有一个IFRAME，从IFRAME文档的Javascript中，您可以执行类似以下操作：

function getMySelf()
{
    return (window.parent.document.getElementsByTagName("iframe"))[0];
}

var myself = getMySelf();
myself.style.width = whateverWidth;
myself.style.height = whateverHeight;

- Claudi

Answer 3

对于像您的同源内容，是的，您可以。

借用Gary在上面问题的回答：

在iframe中，window.parent指的是父文档的全局对象，而不是文档对象本身。我认为您需要使用parent.document.getElementById

尝试使用parent.document访问iframe，看看是否解决了您的问题。

- jonathanl