前端技术 August 20, 2018

jsjQuery实现iframe高度自适应

Words count 2.1k Reading time 2 mins. Read count 0

虽然现在前端框架很多,但是有时候还是会需要用到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)
   }

jQuery一些获取高度的用法

获取窗口可视区域高度

$(window).height();

获取文档高度

$(document).height();
0%