【html】iframe 的高度自适应

一、demo

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

<head>
    <meta charset="utf-8" />
    <title>Iframe height demo</title>
    <style media="screen,print">
        #body {
            width: 70em;
            max-width: 100%;
            margin: 0 auto;
        }

        iframe {
            width: 100%;
            margin: 0 0 1em;
            border: 0;
        }
    </style>
    <script>
        /*
         * When the iframe is on a different subdomain, uncomment the following line
         * and change "example.com" to your domain.
         */
        // document.domain = "example.com";
        function setIframeHeight(iframe) {
            if (iframe) {
                var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
                if (iframeWin.document.body) {
                    iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
                    console.log(iframeWin.document.documentElement.scrollHeight , iframeWin.document.body.scrollHeight);
                }
            }
        };
    </script>
</head>

<body>
    <div id="body">
        <h1>Iframe height demo</h1>
        <h2><code>iframe</code> <strong>with</strong> height adjustment</h2>
        <iframe src="iframe高度自适应-src.html"
            frameborder="0"
            id="external-frame" onload="setIframeHeight(this)"></iframe>
    </div>
</body>

</html>

View Code

二、扩展一：iframe自适应高度 document.body.scrollHeight取值不对

浏览器所有内容高度：浏览器整个框架的高度，包括滚动条卷去部分+可视部分+底部隐藏部分的高度总和。

浏览器滚动部分高度：滚动条卷去部分高度即可视顶端距离整个对象顶端的高度。

1. 适配3wschool,即DTD声明了

1-1. IE浏览器

document.documentElement.scrollHeight——浏览器所有内容高度

document.body.scrollHeight——浏览器所有内容高度
document.documentElement.scrollTop——浏览器滚动部分高度
document.body.scrollTop——始终为0
document.documentElement.clientHeight——浏览器可视部分高度
document.body.clientHeight——浏览器所有内容高度

1-2. 火狐浏览器firefox

document.documentElement.scrollHeight——浏览器所有内容高度

1-3. Chrome谷歌浏览器

document.documentElement.scrollHeight——浏览器所有内容高度

document.body.scrollHeight——浏览器所有内容高度
document.documentElement.scrollTop——始终为0
document.body.scrollTop——浏览器滚动部分高度
document.documentElement.clientHeight——浏览器可视部分高度
document.body.clientHeight——浏览器所有内容高度

——————————————————————————————————————————————

2.未完全适配3wschool,即DTD声明了

2-1. IE浏览器

document.documentElement.scrollHeight——浏览器可视部分高度

document.body.scrollHeight——浏览器所有内容高度
document.documentElement.scrollTop——始终为0
document.body.scrollTop——浏览器滚动部分高度
document.documentElement.clientHeight——始终为0
document.body.clientHeight——浏览器可视部分高度

2-2. 火狐浏览器firefox

document.documentElement.scrollHeight——浏览器可视部分高度

document.body.scrollHeight——浏览器所有内容高度
document.documentElement.scrollTop——始终为0
document.body.scrollTop——浏览器滚动部分高度
document.documentElement.clientHeight——浏览器所有内容高度
document.body.clientHeight——浏览器可视部分高度

2-3. Chrome谷歌浏览器

document.documentElement.scrollHeight——浏览器可视部分高度

document.body.scrollHeight——浏览器所有内容高度
document.documentElement.scrollTop——始终为0
document.body.scrollTop——浏览器滚动部分高度
document.documentElement.clientHeight——浏览器所有内容高度
document.body.clientHeight——浏览器可视部分高度

从上面的情况可以得出

1、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0，所以可以用这两个的和来求scrollTop

2、scrollHeight、clientHeight 在DTD已声明的情况下用documentElement，未声明的情况下用body

PS:可以使用 document.compatMode 可以用来判断是否声明了DTD，得值进行判断。

我们则没有使用document.compatMode来判断，而是直接

var bodyHeight=document.body.scrollHeight==0?document.documentElement.scrollHeight:document.body.scrollHeight;

var height = bodyHeight -70;