我正在开发一个类似igoogle的应用程序。来自其他应用程序(在其他域中)的内容使用iframe显示。
我如何调整iframes的大小以适应iframes的内容的高度?
我试图破译的javascript谷歌使用，但它是模糊的，搜索网络至今一无所获。
更新:请注意，内容是从其他域加载的，因此适用同源策略。
当前回答
https://getbootstrap.com/docs/4.0/utilities/embed/
经过大量的研究，我明白了，这不是一个独特的问题，我打赌Bootstrap处理它。你瞧……
其他回答
下面是一个jQuery方法，它通过iframe的src属性在json中添加信息。这是一个演示，调整大小和滚动这个窗口。使用json生成的url如下所示… http://fiddle.jshell.net/zippyskippy/RJN3G/show/ {scrollHeight windowHeight docHeight: 5124: 1019: 571} #
这里是源代码提琴http://jsfiddle.net/zippyskippy/RJN3G/
function updateLocation(){
var loc = window.location.href;
window.location.href = loc.replace(/#{.*}#/,"")
+ "#{docHeight:"+$(document).height()
+ ",windowHeight:"+$(window).height()
+ ",scrollHeight:"+$(window).scrollTop()
+"}#";
};
//setInterval(updateLocation,500);
$(window).resize(updateLocation);
$(window).scroll(updateLocation);
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"。这可能不是你想要的。
使用jquery加载(跨浏览器):
<iframe src="your_url" marginwidth="0" marginheight="0" scrolling="No" frameborder="0" hspace="0" vspace="0" id="containiframe" onload="loaderIframe();" height="100%" width="100%"></iframe>
function loaderIframe(){
var heightIframe = $('#containiframe').contents().find('body').height();
$('#frame').css("height", heightFrame);
}
在响应式页面中调整大小:
$(window).resize(function(){
if($('#containiframe').length !== 0) {
var heightIframe = $('#containiframe').contents().find('body').height();
$('#frame').css("height", heightFrame);
}
});
使用jQuery的最简单方法:
$("iframe")
.attr({"scrolling": "no", "src":"http://www.someotherlink.com/"})
.load(function() {
$(this).css("height", $(this).contents().height() + "px");
});
可能有点晚了，因为所有其他的答案都是老的:-)但是…这是我的解决方案。在实际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
});
});
});
希望这对大家有所帮助。
