【HTML】iframe嵌套界面自适应，可高度自由收缩

╰+攻爆jí腚メ 2023-07-21 08:36 11阅读 0赞

最近在做网页时需要使iframe高度自适应，以提高用户体验，网上找了挺多都很复杂，最后找到了这个

### HTML: ###

<div class="main_page">
         <iframe scrolling="no" id="main" name="main" frameborder="0"  src="" 
            style="min-height:600px;width:100%;height:100%;"></iframe>
    </div>

**JS：**

<script>
      // 计算页面的实际高度，iframe自适应会用到
      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
      }
      //根据ID获取iframe对象
      var ifr = document.getElementById('main')
      ifr.onload = function() {
            //解决打开高度太高的页面后再打开高度较小页面滚动条不收缩
            ifr.style.height='0px';
          var iDoc = ifr.contentDocument || ifr.document
          var height = calcPageHeight(iDoc)
          if(height < 850){
              height = 850;
          }
          ifr.style.height = height + 'px'
      }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关【HTML】iframe嵌套界面自适应，可高度自由收缩

最近在做网页时需要使iframe高度自适应，以提高用户体验，网上找了挺多都很复杂，最后找到了这个 HTML: <div class="main_page">

╰+攻爆jí腚メ/ 2023年07月21日 08:36/ 0 赞/ 12 阅读

相关高度自适应和高度塌陷

高度自适应的情况： 1. 高度不去设置，或者高度设置auto 内容撑开父元素的高度。 2. 内容撑开父元素的高度 -> 最小高度的设置 min-height 3. 浮动

灰太狼/ 2023年07月20日 08:22/ 0 赞/ 36 阅读

相关 iframe自适应高度

function setIframeHeight(iframe) \{ if (iframe) \{ var iframeWin

妖狐艹你老母/ 2022年09月24日 08:29/ 0 赞/ 293 阅读

相关总结iframe高度自适应，自适应子页面高度

在网上找了很多iframe的高度自适应，发现很多兼容性都不是很好，于是自己总结了一下。页面html节点上要有 <!DOCTYPE html PUBLIC "-//W3C

怼烎@/ 2022年07月24日 10:07/ 0 赞/ 329 阅读

相关 iframe自适应高度

[JS][]自适应高度，其实就是设置[iframe][]的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。如果内容是固定的，

落日映苍穹つ/ 2022年07月15日 15:49/ 0 赞/ 321 阅读

相关 DIV嵌套过程中的高度自适应问题

对于很多网站制作的新手朋友来说，学习DIV+CSS是必不可少的。站长在一些上海网站制作论坛以及QQ群里面，还有百度问答里面，看到很多朋友在问嵌套DIV的很多问题，比如嵌套DIV

向右看齐/ 2022年07月13日 01:40/ 0 赞/ 349 阅读

相关 textarea高度自适应

之前虽然写了几篇关于textarea的高度自适应的解决方案，但都不甚满意，最近从Element的源码中得到启示，就自己写了一个textarea高度自适应的jquery插件。

ゞ浴缸里的玫瑰/ 2022年06月02日 07:09/ 0 赞/ 391 阅读

相关 iframe自适应高度

<iframeοnlοad="this.height=this.document.documentElement.scrollHeight"name="reportsFrame

柔光的暖阳◎/ 2022年04月14日 05:20/ 0 赞/ 364 阅读

相关高度自适应

开发中遇到一个问题，要求不管在多高的屏幕下，图片(什么都行)到底部的距离都应该和psd一致，flash里面的问题 ![70][] //定义宽度 var psdWidth

约定不等于承诺〃/ 2021年09月16日 06:40/ 0 赞/ 532 阅读

相关 iframe高度自适应

子页面头部是： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w

柔光的暖阳◎/ 2021年07月26日 12:30/ 0 赞/ 574 阅读