CSS实现iframe高度自适应示例

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

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

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




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

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

下面的两种方法自选其一就行了。一个是放在和iframe同页面的，一个是放在test.html页面的。
注意别放错地方了哦。

iframe代码，注意要写ID


jquery代码１：
//注意：下面的代码是放在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代码２：

//注意：下面的代码是放在和iframe同一个页面调用

$("#main").load(function(){

var mainheight = $(this).contents().find("body").height()+30;

$(this).height(mainheight);

});

HTML代码：


Javascript代码：

推荐专题

最新下载

热门教程

CSS实现iframe高度自适应示例

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程