我正在开发类似iGoogle的应用程序。使用iframe显示其他应用程序（在其他域上）的内容。
如何调整iframe的大小以适合iframe内容的高度？
我试图破译Google使用的javascript，但它被混淆了，到目前为止，在网络上搜索毫无结果。
更新：请注意，内容是从其他域加载的，因此适用同源策略。
根据内容调整iframe的大小
Using jQuery:
parent.html
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<style>
iframe {
width: 100%;
border: 1px solid black;
}
</style>
<script>
function foo(w, h) {
$("iframe").css({width: w, height: h});
return true; // for debug purposes
}
</script>
<iframe src="child.html"></iframe>
</body>
child.html
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function() {
var w = $("#container").css("width");
var h = $("#container").css("height");
var req = parent.foo(w, h);
console.log(req); // for debug purposes
});
</script>
<style>
body, html {
margin: 0;
}
#container {
width: 500px;
height: 500px;
background-color: red;
}
</style>
<div id="container"></div>
</body>
get iframe content height then give it to this iframe
var iframes = document.getElementsByTagName("iframe");
for(var i = 0, len = iframes.length; i<len; i++){
window.frames[i].onload = function(_i){
return function(){
iframes[_i].style.height = window.frames[_i].document.body.scrollHeight + "px";
}
}(i);
}
When you want to zoom out a web page to fit it into the iframe size:
- You should resize the iframe to fit it with the content
- Then you should zoom out the whole iframe with the loaded web page content
Here is an example:
<div id="wrap">
<IFRAME ID="frame" name="Main" src ="http://www.google.com" />
</div>
<style type="text/css">
#wrap { width: 130px; height: 130px; padding: 0; overflow: hidden; }
#frame { width: 900px; height: 600px; border: 1px solid black; }
#frame { zoom:0.15; -moz-transform:scale(0.15);-moz-transform-origin: 0 0; }
</style>
iGoogle小工具必须主动实现调整大小，因此我的猜测是在跨域模型中，如果没有远程内容以某种方式参与，您将无法做到这一点。如果您的内容可以使用典型的跨域通信技术将新大小的消息发送到容器页面，则其余的操作很简单。
这是一个使用动态生成的样式表的简单解决方案，该样式表由与iframe内容相同的服务器提供。样式表非常简单地“知道” iframe中的内容，并且知道用于对iframe进行样式设置的尺寸。这绕过了相同的原始策略限制。
http://www.8degrees.co.nz/2010/06/09/dynamically-resize-an-iframe-depending-on-its-content/
因此，提供的iframe代码将具有随附的样式表，例如...
<link href="http://your.site/path/to/css?contents_id=1234&dom_id=iframe_widget" rel="stylesheet" type="text/css" />
<iframe id="iframe_widget" src="http://your.site/path/to/content?content_id=1234" frameborder="0" width="100%" scrolling="no"></iframe>
这确实要求服务器端逻辑能够计算iframe呈现内容的尺寸。
此答案仅适用于使用Bootstrap的网站。Bootstrap的响应式嵌入功能可以完成此任务。它基于内容的宽度（而不是高度）。
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe>
</div>
jsfiddle：http : //jsfiddle.net/00qggsjj/2/
可能有点晚了，因为所有其他答案都比较老了:-)但是...这是我的解决方案。在实际的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
});
});
});
希望这对任何人都有帮助。
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个长度... 1个对我有用。
仅供参考：如果您在iFrame上已经具有“ height”属性，则只需添加style =“ height：xxx”。这可能不是您想要的。
使用jQuery的最简单方法：
$("iframe")
.attr({"scrolling": "no", "src":"http://www.someotherlink.com/"})
.load(function() {
$(this).css("height", $(this).contents().height() + "px");
});
Something on the lines of this i belive should work.
Load this with your body onload on the iframe content.