根据动态内容动态调整iframe高度

First, I'll give you the structure of my page:

首先,我会给你我的页面结构:

<html>
<body>
    <div>
    <iframe>
        <div id="div1">
        </div>
    </iframe>
    </div>
</body>
</html>

If only I knew ahead the size of div1, there's no problem here. However, I am dynamically adding contents into div1 using jquery ajax and so I could not pre-set the <iframe>'s height.

如果我只知道div1的大小,那么这里没有问题。但是,我使用jquery ajax动态地将内容添加到div1中,因此我无法预先设置的高度。&amp;lt;/p&amp;gt;

I've tried the solutions I found in other threads by adding some script in the onload of the <iframe> but it's useless since the contents are dynamically changing without reloading the page.

我通过在的onload中添加一些脚本尝试了我在其他线程中找到的解决方案,但由于内容在不重新加载页面的情况下动态更改,因此无用。&amp;lt;/p&amp;gt;

Any help?

2 个解决方案

#1

In your child page, after the dynamically generated code has finished loading, insert this code:

在您的子页面中,在动态生成的代码加载完毕后,插入以下代码:

// Rsize containing iframe to proper height
parent.parent.resizeIframe($('html').height());

Then, in the parent page, include this function:

然后,在父页面中,包含此功能:

function resizeIframe(newHgt)
{
    $('#iframeid').height((parseInt(newHgt)+75)+'px');
}

This will get you where you need to be, but the issue I'm trying to resolve is how to determine the size of the iframe contents after the dynamically generated code has finished loading ... "all from the parent page".

这将使您获得所需,但我正在尝试解决的问题是如何在动态生成的代码完成加载后确定iframe内容的大小...“所有来自父页面”。

Anyway, hope this helps you.

无论如何,希望这对你有所帮助。

...

#2

I am not sure why you want to use an iframe here. But maybe you cantry using

我不确定你为什么要在这里使用iframe。但也许你可以使用

http://sonspring.com/journal/jquery-iframe-sizing

#1