jsjQuery实现iframe高度自适应

本文介绍如何使用原生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)
   }

jQuery一些获取高度的用法

获取窗口可视区域高度

$(window).height();

获取文档高度

$(document).height();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值