我正在开发一个类似igoogle的应用程序。来自其他应用程序(在其他域中)的内容使用iframe显示。
我如何调整iframes的大小以适应iframes的内容的高度?
我试图破译的javascript谷歌使用，但它是模糊的，搜索网络至今一无所获。
更新:请注意，内容是从其他域加载的，因此适用同源策略。
当前回答
找不到能完美处理大文本+大图像的东西，但我最终得到了这个，似乎这是对的，或者几乎是对的，每一次:
iframe.addEventListener("load",function(){
// inlineSize, length, perspectiveOrigin, width
let heightMax = 0;
// this seems to work best with images...
heightMax = Math.max(heightMax,iframe.contentWindow.getComputedStyle(iframe.contentWindow.document.body).perspectiveOrigin.split("px")[0]);
// this seems to work best with text...
heightMax = Math.max(heightMax,iframe.contentWindow.document.body.scrollHeight);
// some large 1920x1080 images always gets a little bit off on firefox =/
const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
if(isFirefox && heightMax >= 900){
// grrr..
heightMax = heightMax + 100;
}
iframe.style.height = heightMax+"px";
//console.log(heightMax);
});
其他回答
iGoogle小工具必须主动实现调整大小，所以我猜在跨域模型中，如果没有远程内容以某种方式参与，你就无法做到这一点。如果您的内容可以使用典型的跨域通信技术将具有新大小的消息发送到容器页面，那么其余部分就很简单了。
http://www.phinesolutions.com/use-jquery-to-adjust-the-iframe-height.html上的解决方案很好(使用jQuery):
<script type=”text/javascript”>
$(document).ready(function() {
var theFrame = $(”#iFrameToAdjust”, parent.document.body);
theFrame.height($(document.body).height() + 30);
});
</script>
我不知道你是否需要在长度上加上30…我为我工作过。
仅供参考:如果你已经在你的iFrame上有一个“height”属性，这只是添加了style="height: xxx"。这可能不是你想要的。
我正在实现ConroyP的帧中帧解决方案，以取代基于设置文档的解决方案。域，但发现它是相当困难的确定iframe的内容的高度在不同的浏览器(测试与FF11, Ch17和IE9现在)。
ConroyP uses:
var height = document.body.scrollHeight;
但这只适用于初始页面加载。我的iframe有动态内容，我需要在某些事件上调整iframe的大小。
我最终为不同的浏览器使用了不同的JS属性。
function getDim () {
var body = document.body,
html = document.documentElement;
var bc = body.clientHeight;
var bo = body.offsetHeight;
var bs = body.scrollHeight;
var hc = html.clientHeight;
var ho = html.offsetHeight;
var hs = html.scrollHeight;
var h = Math.max(bc, bo, bs, hc, hs, ho);
var bd = getBrowserData();
// Select height property to use depending on browser
if (bd.isGecko) {
// FF 11
h = hc;
} else if (bd.isChrome) {
// CH 17
h = hc;
} else if (bd.isIE) {
// IE 9
h = bs;
}
return h;
}
getBrowserData()是受Ext Core http://docs.sencha.com/core/source/Ext.html#method-Ext-apply启发的浏览器检测函数
这在FF和IE上运行得很好，但在Chrome上就出现了问题。其中一个是时间问题，显然Chrome需要一段时间来设置/检测iframe的高度。如果iframe比内容高，Chrome也不会正确返回iframe中内容的高度。当高度降低时，这将不适用于动态内容。
为了解决这个问题，我总是在检测内容高度之前将iframe设置为较低的高度，然后将iframe高度设置为正确的值。
function resize () {
// Reset the iframes height to a low value.
// Otherwise Chrome won't detect the content height of the iframe.
setIframeHeight(150);
// Delay getting the dimensions because Chrome needs
// a few moments to get the correct height.
setTimeout("getDimAndResize()", 100);
}
代码没有优化，这是从我的devel测试:)
希望有人觉得这有用!
可能有点晚了，因为所有其他的答案都是老的:-)但是…这是我的解决方案。在实际FF, Chrome和Safari 5.0测试。
css:
iframe {border:0; overflow:hidden;}
javascript:
$(document).ready(function(){
$("iframe").load( function () {
var c = (this.contentWindow || this.contentDocument);
if (c.document) d = c.document;
var ih = $(d).outerHeight();
var iw = $(d).outerWidth();
$(this).css({
height: ih,
width: iw
});
});
});
希望这对大家有所帮助。
<html>
<head>
<script>
function frameSize(id){
var frameHeight;
document.getElementById(id).height=0 + "px";
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
}
document.getElementById(id).height= (frameHeight) + "px";
}
</script>
</head>
<body>
<iframe id="frame" src="startframe.html" frameborder="0" marginheight="0" hspace=20 width="100%"
onload="javascript:frameSize('frame');">
<p>This will work, but you need to host it on an http server, you can do it locally. </p>
</body>
</html>
