根据内部的动态内容更改iframe高度

Question

  

可能重复：
  Resizing an iframe based on content

我正在尝试将其中一个网页加载到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的高度

Answer 1

如果你打算使用选项＃2，你可以使用DOM访问父窗口，并设置孩子的iframe高度。

$(document).ready(function() {
    var iframeWin = parent.document.getElementById("yourIframeID");
    iframeWin.height = document.body.scrollHeight;
});

Answer 2

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