我正在开发一个类似igoogle的应用程序。来自其他应用程序(在其他域中)的内容使用iframe显示。
我如何调整iframes的大小以适应iframes的内容的高度?
我试图破译的javascript谷歌使用，但它是模糊的，搜索网络至今一无所获。
更新:请注意，内容是从其他域加载的，因此适用同源策略。
当前回答
使用jQuery的最简单方法:
$("iframe")
.attr({"scrolling": "no", "src":"http://www.someotherlink.com/"})
.load(function() {
$(this).css("height", $(this).contents().height() + "px");
});
其他回答
我正在实现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测试:)
希望有人觉得这有用!
下面是一个简单的解决方案，使用与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呈现内容的尺寸。
最后，我找到了一些其他的解决方案，从iframe使用窗口发送数据到父网站。postMessage(消息、targetOrigin);。下面我来解释一下我是怎么做到的。
站点A = http://foo.com 站点B = http://bar.com
sitb在网站内部加载
SiteB网站有这条线
window.parent.postMessage("Hello From IFrame", "*");
or
window.parent.postMessage("Hello From IFrame", "http://foo.com");
然后site ea有如下代码
// Here "addEventListener" is for standards-compliant web browsers and "attachEvent" is for IE Browsers.
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen to message from child IFrame window
eventer(messageEvent, function (e) {
alert(e.data);
// Do whatever you want to do with the data got from IFrame in Parent form.
}, false);
如果你想添加安全连接，你可以在事件输入中使用这个If条件(messageEvent, function (e) {})
if (e.origin == 'http://iframe.example.com') {
alert(e.data);
// Do whatever you want to do with the data got from IFrame in Parent form.
}
对于IE
IFrame内:
window.parent.postMessage('{"key":"value"}','*');
外:
eventer(messageEvent, function (e) {
var data = jQuery.parseJSON(e.data);
doSomething(data.key);
}, false);
David Bradshaw和Chris Jacob已经建议使用postMessage方法。我完全同意，做这些事情的正确方法。
我只是想发布一个例子，真实的代码，以防它对一些人来说是现成的答案。
在iframed面:
<body onload="docResizePipe()">
<script>
var v = 0;
const docResizeObserver = new ResizeObserver(() => {
docResizePipe();
});
docResizeObserver.observe(document.querySelector("body"));
function docResizePipe() {
v += 1;
if (v > 5) {
return;
}
var w = document.body.scrollWidth;
var h = document.body.scrollHeight;
window.parent.postMessage([w,h], "*");
}
setInterval(function() {
v -= 1;
if (v < 0) {
v = 0;
}
}, 300);
</script>
注意递归阻塞机制——这显然是必要的，因为Firefox中有一个bug，但不管怎样，让它存在吧。
在父文档端:
<iframe id="rpa-frame" src="3.html" style="border: none;"></iframe>
<script>
var rpaFrame = document.getElementById("rpa-frame");
window.addEventListener("message", (event) => {
var width = event.data[0];
var height = event.data[1];
rpaFrame.width = parseInt(width)+60;
rpaFrame.height = parseInt(height)+60;
console.log(event);
}, false);
</script>
希望对大家有用。
这个答案只适用于使用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/
http://getbootstrap.com/components/#responsive-embed
