计算跨浏览器iframe高度
在我的javascript体验中，最困难的问题之一就是iframe高度的正确计算(即“跨浏览器”)。在我的应用程序中，我有很多动态生成的iframe，我希望它们都在load事件结束时自动调整大小，以调整它们的高度和宽度。
对于height计算，我最好的解决方案如下(在jQuery的帮助下)：
function getDocumentHeight(doc) {
var mdoc = doc || document;
if (mdoc.compatMode=='CSS1Compat') {
return mdoc.body.offsetHeight;
}
else {
if ($.browser.msie)
return mdoc.body.scrollHeight;
else
return Math.max($(mdoc).height(), $(mdoc.body).height());
}
}我在网上找了一下，但没有找到。我还测试了Yahoo库，它有一些文档和视窗尺寸的方法，但它并不令人满意。我的解决方案运行良好，但有时它会计算出更高的高度。我在Firefox/IE/Safari中研究和测试了大量关于文档高度的属性：documentElement.clientHeight, documentElement.offsetHeight, documentElement.scrollHeight, body.offsetHeight, body.scrollHeight, ...也没有在不同浏览器中使用调用$(document.body).height(), $('html', doc).height(), $(window).height()的一致行为
我不仅在load事件结束时调用上面的函数，而且在动态插入的DOM元素或隐藏或显示的元素的情况下也调用。这种情况有时会破坏仅在load事件中工作的代码。
有人有真正的跨浏览器(至少Firefox/IE/Safari)解决方案吗？有什么建议或提示吗？
回答 6
Stack Overflow用户
发布于 2008-10-16 12:20:35
虽然我喜欢你的解决方案，但我总是发现IFRAMEs带来的麻烦比它们的价值更多。
为什么? 1.大小问题。2. iframe需要担心src属性。即绝对路径。3.页面的额外复杂性。
我的解决方案是DIVs，它通过AJAX调用动态加载。DIVs会自动调整大小。虽然AJAX代码需要javascript工作(这可以通过框架完成)，但它们是相对于站点所在位置的。3是一件轻而易举的事情，你在牺牲页面的复杂性，直到javascript。
不使用</div><div>执行ajax调用，将数据填充到mystuff div中，让浏览器来处理。</div><div></div>
Stack Overflow用户
发布于 2011-12-01 06:10:38
这已经有一段时间没有一个公认的答案了，所以我想贡献我在一些研究之后最终采用的解决方案。这是跨浏览器和跨域的(例如，当iframe指向来自不同域的内容时)
我最终使用了包装在jQuery pluging中的HTML5的消息传递机制，这使得它可以使用各种方法(在本文中描述了其中的一些方法)与较旧的浏览器兼容。
最终的解决方案非常简单。
主机(父)页上的：
// executes when a message is received from the iframe, to adjust
// the iframe's height
$.receiveMessage(
function( event ){
$( 'my_iframe' ).css({
height: event.data
});
});
// Please note this function could also verify event.origin and other security-related checks.iframe页面上的：
$(function(){
// Sends a message to the parent window to tell it the height of the
// iframe's body
var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
$.postMessage(
$('body').outerHeight( true ) + 'px',
'*',
target
);
});我已经在Chrome 13+、火狐3.6+、IE7、XP和W7上的8和9、OSX和W7上的safari上进行了测试。;)
Stack Overflow用户
发布于 2011-04-02 20:34:45
因为在您的示例中访问的是IFRAME中的文档，所以我猜您谈论的是文档的高度，而不是框架本身的高度。此外，这意味着内容来自你自己的网站，你可以控制它的内容。
那么，为什么不简单地在内容周围放置一个DIV，然后使用该DIV的clientHeight呢？
您在IFRAME中加载的代码：
...
<body>
<div id="content">
...
</div>
</body>父文档：
function getDocumentHeight(mdoc) {
return mdoc.getElementById("content").clientHeight;
}顺便说一句，示例函数的这一部分没有意义，因为“文档”并没有引用IFRAME：var mdoc = doc || document;
https://stackoverflow.com/questions/207720
复制相似问题