解决iframe高度自适应「建议收藏」

解决iframe高度自适应「建议收藏」解决iframe高度自适应原因第一种方法第二种方法原因iframe的高度不会随着页面高度的变化而变化,可能会导致页面显示不全,或者页面下方有空白的问题。第一种方法这个方式更适用于嵌套的页面,当嵌套多个iframe时,比如左侧有个侧边栏,右侧是个大的iframe,这个大的iframe又嵌套了一层:中间是iframe,但是右侧又有个侧边栏,这时候不想让iframe单独滑动(避免页面出现两个滚动条),而是想整个页面一起滑动时,用这个方法。html代码:注意一定要写height=‘100%’scrol

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

解决iframe高度自适应

原因

iframe的高度不会随着页面高度的变化而变化,可能会导致页面显示不全,或者页面下方有空白的问题。

第一种方法

这个方式更适用于嵌套的页面,当嵌套多个iframe时,比如左侧有个侧边栏,右侧是个大的iframe,这个大的iframe又嵌套了一层:中间是iframe,但是右侧又有个侧边栏,这时候不想让iframe单独滑动(避免页面出现两个滚动条),而是想整个页面一起滑动时,用这个方法。

html代码: 注意一定要写height=‘100%’ scrolling=‘no’ width=’100%’
否则iframe会自己滑动

 <div class=" iframe My-home embed-responsive embed-responsive-16by9" id="taskheight">
        <iframe class="embed-responsive-item" frameborder="0" height='100%' id="form-iframe" name="formIframe" scrolling="no" width='100%'></iframe>
 </div>

Jetbrains全家桶1年46,售后保障稳定

js代码:

try { 
   
    var timer;
    $("#form-iframe").load(function () { 
   
        if (timer) { 
   
            clearInterval(timer);
        }
        //pre_height用于记录上次检查时body的高度
        //mainheight用于获取本次检查时body的高度,并赋予iframe的高度
        var mainheight, pre_height;
        var frame = $(this);
        timer = setInterval(function () { 
   
            mainheight = $(document.body).height() + 10;
            if (mainheight != pre_height) { 
   
                pre_height = mainheight;
                frame.height(Math.max(mainheight, 350));
            }
        }, 500);//每0.5秒检查一次
    });
} catch (e) { 
   
}

第二种方法

这个方法更简单些,适用于左侧有个侧边栏,右侧是iframe,并且iframe可以自己滑动,只在页面高度变化时重新赋值即可。

html代码:

<div class="iframe My-home embed-responsive embed-responsive-16by9">
     <iframe class="embed-responsive-item" frameborder="0" id="form-iframe" src=""></iframe>
      <!--src是动态赋值的-->
</div>

js代码:

  //根据ID获取iframe对象
    var org = $("#form-iframe")
    org.onload = function () { 
   
        //解决打开高度太高的页面后再打开高度较小页面滚动条不收缩
        org.style.height = '0px';
        var iDoc = org.contentDocument || org.document
        var height = calcPageHeight(iDoc)
        if (height < 850) { 
   
            height = 850;
        }
        org.style(height, height + 'px')
    }

两种方法我都用了,亲测好用!!!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/210442.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • SpringBoot重点详解–使用JPA操作数据库[通俗易懂]

    SpringBoot重点详解–使用JPA操作数据库[通俗易懂]目录JPA&SpringDataJPA配置Maven依赖配置数据源和JPA创建POJO实体数据持久化使用SpringDataJPA接口(方式一)CrudRepositoryPagingAndSortingRepositoryJpaRepositoryQueryByExampleExecutor自定义查询方法(方式二)JUnit测试…

  • NotePad++ 正则表达式替换 高级用法[通俗易懂]

    NotePad++ 正则表达式替换 高级用法[通俗易懂]在我们处理文件时,很多时候会用到查找与替换。当我们想将文件中某一部分替换替换文件中另一部分时,怎么办呢?下面正则表达式给我提供方法。正则表达式,提供复杂并且弹性的查找与替换注意:不支持多行表达式(involving\n,\r,etc).1基本表达式PatternMeaning.匹配任意字符,除了新一行(\n)。也就是说“.”可以匹配\r,当文件中同时含有\ra

  • AVAYA Distinctive Ringing带来的问题

    AVAYA Distinctive Ringing带来的问题两台AVAYA级连,上级是S8700,板卡是模拟内线板;下级是DefinityG3si,板卡是COTRUNKTN465C,配置成loop-startCOtrunk,指向VDN。问题如下:从S8700的内线呼入到G3si…

  • Go语言面试题汇总[通俗易懂]

    Go语言面试题汇总[通俗易懂]正在准备golang面试的小伙伴,很荣幸,你能看到这篇文章,希望每一个看到这篇分享的小伙伴都能找到自己称心如意的工作!1、说说go语言的main函数(1)、main函数不能带参数。(2)、main函数不能定义返回值。(3)、main函数所在的包必须为main包。(4)、main函数中可以使用flag包来获取和解析命令行参数。2、在go语言中,new和make的区别?new函数是内建函…

  • 强化学习 模仿学习 于robot[通俗易懂]

    强化学习 模仿学习 于robot[通俗易懂]写在前面:分享知识是再好不过的事情。这篇文章主要是总结自己最近看的一些文章以及相关知识。自己在暑假实习的时候学习的就是在物理仿真平台上做robot的强化学习,未来读PhD的时候也被老师继续分配到了这个方向,哈哈。可能要一直从入门到入土了,趁着最近写researchproposal的时候,将最近的理解记录一下。鉴于笔者知识水平有限,若有不妥当之处,还请指出。摘要:robot强化学习模仿学…

  • 树莓派开发环境搭建(树莓派5)

    在本系列文章的第一部分中,我们将在一台树莓派Pi3ModelB上安装并运行一个以太坊区块链客户端。毫无疑问,区块链绝对是当前的热点。之所以会这样,很大程度上是因为比特币以及其他加密货币让很多人一夜暴富。但是,区块链的应用并不仅限于加密货币领域,考虑到其去中心化以及防篡改等特性,区块链技术还可以用到IoT应用中。因此,除了加密货币和安全交易之外,以太坊平台还可以提供一种分布式的计算平台。在这篇…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号