iframe 自适应高度js

最新推荐文章于 2021-08-04 15:35:58 发布

原创最新推荐文章于 2021-08-04 15:35:58 发布 · 480 阅读

0 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

11 篇文章

订阅专栏

前端

7 篇文章

订阅专栏

本文介绍了一种让iframe元素根据其内容自动调整高度的方法。通过JavaScript函数calcPageHeight计算iframe内部文档的实际高度，并设置iframe的高度样式，确保iframe总是刚好容纳其内容。

iframe 自适应高度

<script>
    function calcPageHeight(doc) {
        var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight);
        var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight);
        var height  = Math.max(cHeight, sHeight);
        return height;
    }
    var ifr = document.getElementById('iframepage');
    ifr.onload = function() {
        var iDoc = ifr.contentDocument || ifr.document;
        var height = calcPageHeight(iDoc);
        ifr.style.height = height + 'px';
    }
</script>

放在body最后，document.getElementById()需改