jsjQuery实现iframe高度自适应

最新推荐文章于 2019-01-31 11:18:00 发布

shirukai

最新推荐文章于 2019-01-31 11:18:00 发布

阅读量485

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端技术文章标签：前端技术

本文链接：https://blog.youkuaiyun.com/shirukai/article/details/80770008

前端技术专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用原生JS和jQuery实现iframe元素的高度自适应。通过调整父级iframe的高度以匹配其内容的实际高度，从而避免不必要的滚动条出现。适用于网页布局需要精细控制的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js/jQuery实现iframe高度自适应

虽然现在前端框架很多，但是有时候还是会需要用到iframe的，在使用iframe的时候，为了美观一点，会尽量避免在父窗口中出现滚动条，在notebook这个项目案例中，也是大量使用了iframe，其中也有高度自适应，下面将用原生js和jQuery两种方法去实现高度自适应。

js代码写在iframe子页面中

    //初始化方法
    adjIframe();   
    //调整父ifram的高度
   var tmpHeight = 0;
   var adjHeight=0;
   function adjIframe() {
   //设置父页面iframe高度为0
       window.parent.document.getElementById("viewDetails").height =0;
    //设置iframe高度=滚动条高度
       window.parent.document.getElementById("viewDetails").height =
           window.parent.document.getElementById("viewDetails").contentWindow.document.body.scrollHeight;
   //考虑到页面有时候加载图片，会影响到高度，所以加一个延时循环，直到高度不变时停止循环        
       setTimeout(function () {
           tmpHeight = window.parent.document.getElementById("viewDetails").contentWindow.document.body.scrollHeight;
           if(tmpHeight>adjHeight){
               adjHeight=tmpHeight;
               adjIframe();
           }
       },1000)
   }

jQuery 方法写在子页面中

    //初始化方法
    adjIframe();   
    //调整父ifram的高度
   var tmpHeight = 0;
   var adjHeight=0;
   function adjIframe() {
   //jQuery获取iframe对象
   var parentIframe = $("#viewDetails"，window.parent.document)
   //设置iframe高度=0；
   parentIframe.height(0);
    //设置iframe高度=滚动条高度
    var tmHeight = parentIframe[0].contentWindow.document.body.scrollHeight
    parentIframe.height(tmHeight)

   //考虑到页面有时候加载图片，会影响到高度，所以加一个延时循环，直到高度不变时停止循环        
       setTimeout(function () {
           if(tmpHeight>adjHeight){
               adjHeight=tmpHeight;
               adjIframe();
           }
       },1000)
   }