惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

酷 壳 – CoolShell
酷 壳 – CoolShell
aimingoo的专栏
aimingoo的专栏
P
Proofpoint News Feed
宝玉的分享
宝玉的分享
MyScale Blog
MyScale Blog
The GitHub Blog
The GitHub Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
月光博客
月光博客
量子位
博客园 - 司徒正美
V
V2EX
I
InfoQ
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Vercel News
Vercel News
H
Hackread – Cybersecurity News, Data Breaches, AI and More
美团技术团队
N
Netflix TechBlog - Medium
L
LangChain Blog
IT之家
IT之家
Blog — PlanetScale
Blog — PlanetScale
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Stack Overflow Blog
Stack Overflow Blog
A
About on SuperTechFans
Microsoft Azure Blog
Microsoft Azure Blog

博客园 - a-peng

My post test IE inline edit how to make hidden element actually hide EntityFramework4.1 Mapping Asp.Net Mvc 3.0 Windbg IOC与AOP Custom Date and Time Format Strings group by Year(CreatedDate), Month(CreatedDate) 用sql, entity sql (linq表达式好像挺复杂) asp.net life cycle OH MY GOD! 我的后台页面都被IE可缓存了。。。 编译器错误消息: 类型“System.Data.Objects.DataClasses.EntityObject”在未被引用的程序集中定义。 让IE8使用IE7兼容模式运行 - a-peng - 博客园 Visual Studio 2008 Html Designer无法加载 修改SQLServer2008数据表无法提交 jQuery plugin LazyForm定制您的CheckBox Radio和Select [转载] [翻译]在ASP.NET MVC中使用TDD与依赖注入 Asp.Net Mvc使用Ajax.BeginForm上传文件Request.Files始终为empty Asp.Net Mvc Ajax偏方 太疯狂了:Teleport Pro......It's incredible.
让IFrame自适应高度
a-peng · 2010-02-06 · via 博客园 - a-peng

IFrame需要如何自适应高度呢?
要是我们能够知道IFrame所加载页面的高度,然后设置IFrame的高度为所加载页面的高度,那么就可以达到自适应高度了。

那要怎么知道IFrame所加载页面的高度?

var clientHeight = $("#mainFrame").contents().find("body").height();

使用jQuery去查找IFrame中的body的高度,那么clientHeight就是我们想要的了。

但是我们要在什么时候去查找IFrame中的body呢?当然必须在IFrame加载完成的时候,要是IFrame还未加载完成,那我们如何取出它的body.

$("#mainFrame").load(function() {
    
var clientHeight = $("#mainFrame").contents().find("body").height();
    $(
this).height(clientHeight);
});

这个世界是不是美好了很多?

btw: 2009-12-16
今天修改了IFrame里的结构为
<div id="main"></div> float: left;
<div id="right-sidebar"></div> float: left;
$("#mainFrame").contents().find("body").height(); 取出的值为0

这是为什么呢?因为使用了float,则脱离了文档结构,你可以通过Firebug移过去,可以看到body没有选中任何区域。
那我们该怎么办呢?
只有main和right-sidebar两部分,取高的那部分不就可以了。

var mainHeight = $("#mainFrame").contents().find("#main").height();
var rightHeight = $("#mainFrame").contents().find("#right-sidebar").height();
var clientHeight = Math.max(mainHeight, rightHeight);