iframe框根据内容自适应高度(100%可用)

红目香薰

发布于 2022-11-29 17:37:06

1.9K00

代码可运行

文章被收录于专栏：CSDNToQQCodeCSDNToQQCode

运行总次数：0

代码可运行

iframe框根据内容自适应高度(100%可用)

HTML:

<iframe id="iframe" src="自己写地址" name="content" frameborder="0" style="width: 100%;height: 100vh;"></iframe>

script:

 <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#iframe").height(0); //用于每次刷新时控制IFRAME高度初始化 
            var height = $("#iframe").contents().height() + 20;
            $("#iframe").height(height < 800 ? 800 : height); //最小的高度700
        }
    </script>

在不显示滚动条的方式支持【滚轮】拉动。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-12-16，如有侵权请联系 cloudcommunity@tencent.com 删除

html