iframe根据内容自适应高度

最新推荐文章于 2025-05-18 13:16:54 发布

原创最新推荐文章于 2025-05-18 13:16:54 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #JS

JS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了两种在网页中自动调整iframe元素高度的方法。方法一使用JavaScript函数IFrameReSize来适应不同浏览器环境，通过检查内容文档的高度进行调整。方法二提供了一个名为reinitIframe的函数，该函数尝试获取iframe内容窗口的body或documentElement的scrollHeight属性，并将这个值设置为iframe的高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：

function IFrameReSize(iframename) {
    var pTar = iframename;
    if (pTar) {  //ff
        if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight) {
            pTar.height = pTar.contentDocument.body.offsetHeight;
        } //ie
        else if (pTar.Document && pTar.Document.body.scrollHeight) {
            pTar.height = pTar.Document.body.scrollHeight;
        }
    }

  }
方法二：

function reinitIframe(){
    var iframe = document.getElementById("testIframe");
    try{
        var bHeight = iframe.contentWindow.document.body.scrollHeight;
        var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
        var height = Math.max(bHeight, dHeight);
        iframe.height = height;
        // console.log(height);
    }catch (ex){}
}

使用此方法，最好在html加上这句话

<!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">