【html】iframe 的高度自適應

本文轉載自查看原文 2020-05-14 19:00 1076

一、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;

三、擴展二：Frame/IFrame contentWindow 屬性

1. 定義和用法

contentDocument 屬性能夠以 HTML 對象來返回 iframe 中的文檔。

可以通過所有標准的 DOM 方法來處理被返回的對象。

2. 語法

frameObject.contentWindow

或者

iframeObject.contentWindow

3. 瀏覽器支持

所有主要瀏覽器都支持 contentWindow 屬性

4. demo:

https://www.runoob.com/try/try.php?filename=tryjsref_iframe_contentdocument