javascript - iframe 是否有可能在没有主窗口帮助的情况下自行调整大小？

Question

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

我也不知道主窗口分配给它的 iframe 的 ID。而且我不想使用 jquery 或任何其他框架。

Answer 1

您也可以在不知道父窗口中的 的id情况下执行此操作：iframe

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

请参阅MDNframeElement。

编辑

以防万一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;
}

Answer 2

对于像你这样的同源内容，是的，你可以。

借用加里对上述问题的回答：

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

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

Answer 3

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

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

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