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

时间 2019-11-09

标签真正解决 iframe 高度自适应问题栏目 HTML 繁體版

原文原文链接

1.前言

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

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

若是使用iframe时，遇到如下的需求：html
- iframe的高度始终等于嵌入页面内容的高度，而不是屏幕的高度
- 右侧不容许出现两个滚动条
- iframe的高度自适应不单单是指刚加载进来时，也有可能嵌入内容的高度会随点击变化（如：下拉菜单，左侧导航栏等）
- 页面可能同时嵌入多个iframe

2.contentWindow对象

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

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

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

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

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

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

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

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

若是此时，你发现当子页面高度变高时，高度能够自适应的变高，但在变低时，会发现父页面的高度并无向咱们想象的随着子页面下降，致使底部留有大面积空白的问题，请继续往下看跨域

3.文档声明的重要性

将子页面的文档声明改成就行了

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

4.demo

父页面：a.htmlapp

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>a</title>
</head>

<body style="background-color:red">
    <iframe id="iFrame" class="flexiframe" src="./b.html" style="padding: 0;width:100%;" marginwidth="0" frameborder="no" scrolling="no" height="2000px"></iframe>
    <!-- <iframe id="iFrame1" class="flexiframe" src="./b.html" style="padding: 0;width:100%" marginwidth="0" frameborder="no" scrolling="no"></iframe> -->
    <!-- <iframe id="iFrame2" class="flexiframe" src="./b.html" style="padding: 0;width:100%" marginwidth="0" frameborder="no" scrolling="no"></iframe> -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="./flexiframe.js"></script>
</body>

</html>

./flexiframe.jsflex

// 使用前先将子页面文档声明改成
//<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
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的高度关系）ui

<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -->
<!DOCTYPE html>
<div id="b_conntent">
        <div style="width:100px;background-color:blue">
                <div style="height:2000px">
                        <button id="btn">小</button>
                </div>
        </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
        $('#btn').on('click', function () {
                if ($(this).text() == '小') {
                        $(this).text('大').parent().css('height', '200px')
                } else {
                        $(this).text('小').parent().css('height', '2000px')
                }
        })
</script>

5.总结

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