9

可能重复：
根据内容调整 iframe 的大小

我正在尝试将我的一个页面加载到 iframe 中。我永远不确定页面有多大，页面上的数据是动态加载的。我希望 iframe 始终适合页面，无论它有多大或多小。这是我所拥有的：

function loadModal() {
    myframe = $('<iframe id="mymodal" src="MyPage.aspx" width="700"></iframe>');

    myframe.appendTo($('html'));

    var height = document.getElementById('modalPreview').contentWindow
                     .document.body.scrollHeight;

    $("#mymodal").attr("height", height);
}

我一直在尝试获取页面加载后的高度。问题是height返回为0. 但如果我这样做：

    setTimeout(function () {
        $("#mymodal").attr("height", height);
    }, 2000);

加载了正确的高度。我认为这是因为数据需要几秒钟才能加载。但是如果页面加载得非常快，这看起来很时髦，或者如果加载页面需要超过 2 秒，它仍然会给我一个 0 的高度。

那么有没有办法：

  1. 加载数据后等待并设置 iframe 的高度，或者
  2. MyPage.aspx从?设置父 iframe 的高度
4

2 回答 2

12

如果您要使用选项#2，您可以使用 DOM 访问父窗口并设置子窗口的 iframe 高度。

$(document).ready(function() {
    var iframeWin = parent.document.getElementById("yourIframeID");
    iframeWin.height = document.body.scrollHeight;
});
于 2012-10-10T19:40:43.500 回答
1

您可以在插入之前将onload事件挂钩。Iframe当它触发时，检查 iframe 中文档的高度并相应地调整其高度。

于 2012-10-10T19:36:35.583 回答