一聚教程网:一个值得你收藏的教程网站

热门教程

CSS实现iframe高度自适应示例

时间:2022-06-25 10:04:56 编辑:袖梨 来源:一聚教程网


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

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





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

html, body, table, tbody, tr, td { width:100%; height:100%; overflow:hidden;}
iframe { width:100%; height:100%; border:none;}
table{ border-collapse:collapse; border}




 
  
   

   
  
 


目测貌似把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代码:
javascript" language="javascript">   
 function iFrameHeight() {   
  var ifm= document.getElementById("iframepage");   
  var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;   
  if(ifm != null && subWeb != null) {
     ifm.height = subWeb.body.scrollHeight;
  }   
 }   

热门栏目