服务器与VPS
促销优惠信息

iframe框根据内容自适应高度

frame框根据内容自适应高度(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.7.1.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>

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

腾讯云代金券
腾讯云代金券
新客户无门槛领取价值高达2860元代金券,每种券限量500张,先到先得。
赞(0) 打赏
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权

文章名称:《iframe框根据内容自适应高度》

文章链接:https://www.chukuangren.com/iframe-gaodu-zishiying.html

本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址