关于iframe 内嵌页面高度的解决手记

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

chenlianxiang_Blog

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

阅读量3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端 springboot 文章标签：前端 iframe

本文链接：https://blog.youkuaiyun.com/smile06211114/article/details/91388475

springboot 同时被 2 个专栏收录

5 篇文章

订阅专栏

前端

1 篇文章

订阅专栏

本文记录了如何解决iframe内嵌一个包含Bootstrap表格的页面时，因表格数据加载和页码大小变化导致的显示问题。关键在于，在表格数据加载完成后，通过调用父页面的changeHeight()方法来动态调整父页面的高度，确保内容完整显示，避免被隐藏。同时，子页面还可以修改父页面的title。

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

function context(id) {

    $("#t_context").html("");
    var html=" <iframe id='t_contextPage' MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src=\""+id+".html\" width=\"100%\" height=\"100%\">\n" +
        "  </iframe>";
    $("#t_context").html(html);


    //解决打开高度太高的页面后再打开高度较小页面滚动条不收缩

    changeHeight();
}

function changeHeight() {
    var ifr = document.getElementById('t_contextPage');
    ifr.style.height='0px';
    var iDoc = ifr.contentDocument || ifr.document;
    var height = calcPageHeight(iDoc);
    if(height < 550){
        height = 600;
    }
    ifr.style.height = height + 'px';
}

// 计算页面的实际高度，iframe自适应会用到
function calcPageHeight(doc) {
    var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight);
    var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight);
    var height  = Math.max(cHeight, sHeight);
    return height
}

由于内嵌页面是个bootstrap 的table 这里就会有改变页码大小的事件，子页面改变页面大小，父类并没有感知到，所以我们需要在table加载完数据之后去触发父类changeHeight（）的方法，去改变父类页面的高度，这样才会完整的显示出数据列表，不会被隐藏。

onLoadSuccess:function () {
            //数据加载完成之后，触发父类的改变页面高度的方法，确保页的大小发生变化之后导致还是原先的高度，
            parent.changeHeight();
        }

这样就完整解决了内嵌页面高度的问题

子页面改变父页面的title

 parent.document.title=document.title;