如何根据内容动态设置iframe高度[重复]

Posted 2023-02-22

【中文标题】如何根据内容动态设置iframe高度[重复]

【英文标题】：how to set iframe height dynamically depending up on the content [duplicate]

【发布时间】：2014-01-07 20:47:09

【问题描述】：

我正在使用<iframe id='' src =" + url + " style='width:100%;border:none;'></iframe> 我正在尝试根据内容高度设置 iframe 高度。 如果我没有提到 iframe 的高度，它会采用默认高度。 谁能告诉我如何根据内容高度设置 iframe 高度....

【问题讨论】：

总是发布您尝试过的内容以及您在哪里备货？

***.com/questions/9162933/…

【参考方案1】：

你可以使用下面的代码。

style="height:auto;"

【参考方案2】：

html：

<iframe name="i_frame" id="i_frame" src="" onload="iframeAutoSize( this.id );">
</iframe>

JS：

function iframeAutoSize( id ) 

    iframe_element = document.getElementById( id );

    if ( iframe_element )

        var new_height = iframe_element.contentDocument.documentElement.offsetHeight;
        //var new_width = iframe_element.contentDocument.documentElement.childNodes[2].offsetWidth;

        $("#"+id).height( new_height );
        //$("#"+id).width( new_width );
    

【参考方案3】：

您可以参考以下代码：

jQuery(document).ready(function()
var height = $(window).height();
$('iframe').css('height', height)
);

在上面的示例中，我将窗口的高度设置为 iframe。根据您的要求，您可以获取内容的高度，然后将其设置为 iframe 的高度。

希望这会有所帮助！