我正在开发一个类似igoogle的应用程序。来自其他应用程序(在其他域中)的内容使用iframe显示。
我如何调整iframes的大小以适应iframes的内容的高度?
我试图破译的javascript谷歌使用,但它是模糊的,搜索网络至今一无所获。
更新:请注意,内容是从其他域加载的,因此适用同源策略。
我正在开发一个类似igoogle的应用程序。来自其他应用程序(在其他域中)的内容使用iframe显示。
我如何调整iframes的大小以适应iframes的内容的高度?
我试图破译的javascript谷歌使用,但它是模糊的,搜索网络至今一无所获。
更新:请注意,内容是从其他域加载的,因此适用同源策略。
当前回答
如果您可以控制iframe内容,我强烈建议使用
调整观察者大小
只需在iframe的srcdoc属性的末尾插入以下内容, 如果需要,可以转义。
<script type="text/javascript">
var ro = new ResizeObserver(entries => {
for (let entry of entries) {
const cr = entry.contentRect;
// console.log(window.frameElement);
window.frameElement.style.height =cr.height +30+ "px";
}
});
ro.observe(document.body);
</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
我相信这样的做法会奏效。
parent.document.getElementById(iFrameID).style.height=framedPage.scrollHeight;
在iframe内容中加载你的body。
我正在实现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测试:)
希望有人觉得这有用!
使用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>
可能有点晚了,因为所有其他的答案都是老的:-)但是…这是我的解决方案。在实际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
});
});
});
希望这对大家有所帮助。