真正解决iframe高度自适应问题

littleGrow 发布于2019-08-02 10:16 / 1578人阅读

摘要：欢迎指出问题或留言加深本文的深度，例如已经不需要声明，但是我解决这个问题不得不改一下，退化到，为什么在中子页面和的高度不是由内部的内容决定的，而是等于父元素的高度

1.前言

解决iframe高度自适应问题有两种方法
1.pym
2.手动设置iframe的高度

本文主要是总结第二种实现方式，因为第一种pym.js插件我没用懂

如果使用iframe时，遇到以下的需求：

iframe的高度始终等于嵌入页面内容的高度，而不是屏幕的高度

右侧不允许出现两个滚动条

iframe的高度自适应不仅仅是指刚加载进来时，也有可能嵌入内容的高度会随点击变化（如：下拉菜单，左侧导航栏等）

页面可能同时嵌入多个iframe

2.contentWindow对象

*需要起个服务，不要直接在本地打开

这是个只读属性，返回指定的iframe的window对象

拿到这个对象，就可以根据正常网页的方法拿到嵌入（子）网页的文档高度，然后把值附给父页面的iframe的height。

function setIframeHeight(iframe) {
    if (iframe) {
        var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
        if (iframeWin.document.body) {
            iframe.height = iframeWin.document.body.scrollHeight;
        }
    }
};

为了监测网页高度是否因为点击了某个下拉按钮高度变化，我们建立一个定时器任务，这样一直监视着子网页的高度。

 setInterval(function () {
            setIframeHeight($("#iframe")[0])
        }, 200)

页面有可能同时存在多个iframe

$(".flexiframe").each(function (index) {//iframe公用类名：flexiframe
    var that = $(this);
    (function () {
        setInterval(function () {
            setIframeHeight(that[0])
        }, 200)
    })(that)
});

如果此时，你发现当子页面高度变高时，高度可以自适应的变高，但在变低时，会发现父页面的高度并没有向我们想象的随着子页面降低，导致底部留有大面积空白的问题，请继续往下看

3.文档声明的重要性

将子页面的文档声明改为就好了

4.demo

父页面：a.html





    
    
    
    <span class="http"><span class="nginx"><span class="hljs-attribute">a</span></span></span>

./flexiframe.js

// 使用前先将子页面文档声明改为
//
function setIframeHeight(iframe) {
    if (iframe) {
        var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
        if (iframeWin.document.body) {
            iframe.height = iframeWin.document.body.scrollHeight;
        }
    }
};
$(".flexiframe").each(function (index) {
    var that = $(this);
    (function () {
        setInterval(function () {
            setIframeHeight(that[0])
        }, 200)
    })(that)
});

子页面b.html，分别注释两种声明方式，点击变大变小按钮看一下右侧滚动条的变化，（细节可以F12看一下iframe种的html和body跟div的高度关系）

5.总结

1.有时间还是要了解下html的进化历史。
2.本文flexiframe.js可以直接使用，但是只支持同源下父页面可以通过contentWindow获取子页面的内容高度，跨域的下次再说。
3.欢迎指出问题或留言加深本文的深度，例如html5已经不需要声明DTD，但是我解决这个问题不得不改一下DOCTYPE，退化到html4，为什么在html5中子页面html和body的高度不是由内部的内容决定的，而是等于父元素iframe的高度？

云服务器 GPU云服务器 iframe高度自适应 iframe自适应高度高度自适应 textarea自适应高度

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52241.html

真正解决iframe高度自适应问题

摘要：欢迎指出问题或留言加深本文的深度，例如已经不需要声明，但是我解决这个问题不得不改一下，退化到，为什么在中子页面和的高度不是由内部的内容决定的，而是等于父元素的高度 1.前言解决iframe高度自适应问题有两种方法1.pym2.手动设置iframe的高度本文主要是总结第二种实现方式，因为第一种pym.js插件我没用懂如果使用iframe时，遇到以下的需求： iframe的高度始...

leone 2019-08-22 16:43 评论0 收藏0
解决各种情况下的iframe高度自适应内容

摘要：自适应高度，其实就是设置的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。这个时候又有几种情况了。我们使用下的另一个页面来做代理，通过它获取页面的高度，并设定元素的高度。 JS自适应高度，其实就是设置iframe的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。如果内容是固定的，那么我们可以通过CSS来给它直接定义一个高度，同...

alexnevsky 2019-08-01 17:46 评论0 收藏0
解决各种情况下的iframe高度自适应内容

摘要：自适应高度，其实就是设置的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。这个时候又有几种情况了。我们使用下的另一个页面来做代理，通过它获取页面的高度，并设定元素的高度。 JS自适应高度，其实就是设置iframe的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。如果内容是固定的，那么我们可以通过CSS来给它直接定义一个高度，同...

Leo_chen 2019-08-21 16:58 评论0 收藏0
解决各种情况下的iframe高度自适应内容

摘要：自适应高度，其实就是设置的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。这个时候又有几种情况了。我们使用下的另一个页面来做代理，通过它获取页面的高度，并设定元素的高度。 JS自适应高度，其实就是设置iframe的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。如果内容是固定的，那么我们可以通过CSS来给它直接定义一个高度，同...

xialong 2019-08-30 15:53 评论0 收藏0