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

最新推荐文章于 2024-08-20 23:46:15 发布

chenlianxiang_Blog

最新推荐文章于 2024-08-20 23:46:15 发布

阅读量2.9k

点赞数 1

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

本文链接：https://blog.csdn.net/smile06211114/article/details/91388475

版权

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

摘要由CSDN通过智能技术生成

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.cl