基于内部的动态内容更改iframe高度 [英] Change iframe height based on dynamic content inside

问题描述

可能重复：

根据内容调整iframe

尝试将我的一个页面加载到iframe。我不知道页面会有多大，页面上的数据是动态加载的。我想要iframe总是适合页面，无论多么大或小。这里是我有：

I'm trying to load one of my pages into an iframe. I'm never sure how big the page will be, the data on the page is loaded dynamically. I'd like the iframe to always fit the page, no matter how big or small it is. Here's what I have:

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 的形式返回。但是如果我这样做：

I've been trying to get the height of the page after it's loaded. The problem is that height comes back as 0. But if I do this:

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

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

the correct height is loaded. I assume it's because the data needs a few seconds to load. But this looks funky if the page loads really fast, or it will still give me a height of 0 if it takes more than 2 seconds to load the page.

有一种方法：

1. 等待并设置数据加载时iframe的高度，或


2. 从 MyPage.aspx 设置父级iframe的高度

1. Wait and set the height of the iframe once the data loads, or
2. Set the height of the parent iframe from MyPage.aspx?

推荐答案

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

If you're going to use option #2 you can access the parent window using the DOM and set the iframe height from the child.

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

这篇关于基于内部的动态内容更改iframe高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！