iframe html高度自适应,CSS实现iframe高度自适应示例

高度自适应的实现方法有不少了,今天我们以css iframe高度自适应示例来为各位引起一些js与jquery的例子,有兴趣的可以和小编一起来看看。

前因:某个项目为了统计效果,把咨询的页面窗口内嵌放进一个单独的空页面,在这个页面里加了个统计,让人看着这个页面就跟直接进入咨询页面一样,懒得折腾啥js,直接用css弄了下,还好需求也不太高。OK了吧。

后果:因为接触iframe很少,几乎就没用过,所以当时就谷歌、百度了下,也不记得当时都搜到了些啥个内容,反正需求也不太强,就直接用css解决了

HTML>      页面内嵌iframe设置宽高度为100% | 格桑的blog
   

目测貌似把table去掉也是可以滴,没有测试过的哦。

下面的两种方法自选其一就行了。一个是放在和iframe同页面的,一个是放在test.html页面的。

注意别放错地方了哦。

iframe代码,注意要写ID

  jquery代码1:  //注意:下面的代码是放在test.html调用  $(window.parent.document).find("#main").load(function(){  var main = $(window.parent.document).find("#main");  var thisheight = $(document).height() 30;  main.height(thisheight);  });

jquery代码2:

//注意:下面的代码是放在和iframe同一个页面调用    $("#main").load(function(){    var mainheight = $(this).contents().find("body").height() 30;    $(this).height(mainheight);    });

HTML代码:

  Javascript代码:  
  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值