Question

我正在使用iFrame开发网站。 iFrame本身没有滚动条。

在该iFrame中有一些元素，当您单击它们时会滑动。所以问题是，如果你打开一个比iFrame高度更大的打开，你就会卡在那里，因为你无法滚动。

所以我希望iFrame的高度与其内容的高度同步。

这是用于滑动一个元素打开的jQuery代码，该代码也适用于其内容：

DELETE FROM expiredEvents WHERE event_id = '$id'

所以我想在此之后添加更改iFrame的高度会更好。

到目前为止我尝试过：

我从this website处理了一些处理相同问题的代码。

$( "#effect1" ).animate({
    height: $( "#effect2" ).prop( "scrollHeight" )
}, 1000 );
$( "#effect2" ).animate({
    height: $( "#effect2" ).prop( "scrollHeight" ) - parseInt( $( "#effect2" ).css( "padding-top" ), 10 ) - parseInt( $( "#effect2" ).css( "padding-bottom" ), 10 )
}, 1000 );

因此，在滑动一个iFrame元素后，我调用了function getDocHeight(doc) { doc = doc || document; // stackoverflow.com/questions/1145850/ var body = doc.body, html = doc.documentElement; var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight ); return height; } function setIframeHeight(id) { var ifrm = document.getElementById(id); var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document; ifrm.style.visibility = 'hidden'; ifrm.style.height = "10px"; // reset to minimal height ... // IE opt. for bing/msn needs a bit added or scrollbar appears ifrm.style.height = getDocHeight( doc ) + 4 + "px"; ifrm.style.visibility = 'visible'; }。但有两个问题：

当高度从一个时刻切换到另一个时刻时，感觉有点痒痒
而不是增加iFrame的高度，它会增加文档的高度

那么如何动态调整iFrame的高度？

Answer 1

我尝试了很多选择。但没有选择是最好的。你可以这样试试：

在iframe中，为每个mili时间创建一个间隔函数（setInterval）运行，以检查文档/元素高度的变化。如果它改变了，调用父窗口并传递新的高度值，它将适合iframe窗口高度。

如何动态调整页面高度到其内容？

1 个答案: