2

我的问题是，当我加载 iframe 时，它​​会正确设置 iframe 的高度，并且在 iframe 中加载数据（内容）时也会自动设置高度，但是当页面加载到 iframe 并设置相对于页面内容的高度时，然后如果我减少或删除内容从加载的页面它不会降低 iframe 高度。（例如，当页面加载第一次高度设置100px并在页面 iframe 高度设置为动态加载数据150px时，当我减少数据时，它没有设置 iframe 的高度，它仍然存在150px）。这是我的代码：

function setIframeHeight(iframe) {
    if (iframe) {
        var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
        if (iframeWin.document.body) {
            iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
        }
        setInterval("setIframeHeight_id('" + iframe.id + "')", 2000);
    }
    return false;
}

function setIframeHeight_id(iframeid) {
    var iframe = document.getElementById(iframeid);
    if (iframe) {
        var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
        if (iframeWin.document.body) {
            iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
        }
    }
    return false;
}

function resizeIframe(nm) {
    setIframeHeight(document.getElementById(nm));
}

HTML

 <iframe id="IframeData" scrolling="no" frameborder="0" width="100%" onload="resizeIframe('IframeData')" allowtransparency="true"></iframe>
4

1 回答 1

1

我强烈建议您使用 jQuery 而不是纯 JavaScript。它本身不会创造奇迹，但肯定会帮助您缩短代码。

当涉及到您的问题时，为什么不使用百分比大小而不是固定像素大小？假设您的 iframe 的高度设置为100%，而不是150px。通过这种方式，下次调整父容器的大小时，iframe 本身将拉伸到父容器的高度。

我希望这有帮助。

于 2013-01-03T14:08:15.840 回答