我正在加载一个iframe中的aspx网页。Iframe中的内容的高度可以大于Iframe的高度。iframe不应该有滚动条。
我在iframe里面有一个包装器div标签，基本上是所有的内容。我写了一些jQuery来实现调整大小:
$("#TB_window", window.parent.document).height($("body").height() + 50);
在哪里 TB_window是包含Iframe的div。
Body - iframe中aspx的Body标签。
该脚本附加到iframe内容。我从父页面获得TB_window元素。虽然这在Chrome上工作得很好，但在Firefox中TB_window崩溃了。我真的不明白为什么会发生这种情况。
当前回答
我使用jQuery和下面的代码为我工作，
var iframe = $(window.top.document).find("#iframe_id_here");
iframe.height(iframe.contents().height()+'px' );
其他回答
我发现接受的答案是不够的，因为X-FRAME-OPTIONS: Allow-From在safari或chrome中不支持。相反，我们采用了不同的方法，这可以从Disqus的Ben Vinegar的演讲中找到。其思想是在父窗口中添加一个事件侦听器，然后在iframe中使用窗口。postMessage发送一个事件给父进程，告诉它做一些事情(调整iframe的大小)。
所以在父文档中，添加一个事件监听器:
window.addEventListener('message', function(e) {
var $iframe = jQuery("#myIframe");
var eventName = e.data[0];
var data = e.data[1];
switch(eventName) {
case 'setHeight':
$iframe.height(data);
break;
}
}, false);
在iframe中，写一个函数来发布消息:
function resize() {
var height = document.getElementsByTagName("html")[0].scrollHeight;
window.parent.postMessage(["setHeight", height], "*");
}
最后，在iframe中，给body标签添加一个onLoad来触发resize函数:
<body onLoad="resize();">
你可以参考相关的问题在这里-如何使iframe的宽度和高度与它的父div相同?
设置动态高度-
我们需要与跨域iFrames和父通信 然后我们可以将iframe的滚动高度/内容高度发送到父窗口
和代码- https://gist.github.com/mohandere/a2e67971858ee2c3999d62e3843889a8
jQuery('.home_vidio_img1 img').click(function(){
video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
jQuery(this).replaceWith(video);
});
jQuery('.home_vidio_img2 img').click(function(){
video = <iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>;
jQuery('.home_vidio_img1 img').replaceWith(video);
jQuery('.home_vidio_img1 iframe').replaceWith(video);
});
jQuery('.home_vidio_img3 img').click(function(){
video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
jQuery('.home_vidio_img1 img').replaceWith(video);
jQuery('.home_vidio_img1 iframe').replaceWith(video);
});
jQuery('.home_vidio_img4 img').click(function(){
video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
jQuery('.home_vidio_img1 img').replaceWith(video);
jQuery('.home_vidio_img1 iframe').replaceWith(video);
});
对蓝鱼的回答略有改进…
function resizeIframe(iframe) {
var padding = 50;
if (iframe.contentWindow.document.body.scrollHeight < (window.innerHeight - padding))
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
else
iframe.height = (window.innerHeight - padding) + "px";
}
这考虑了窗口屏幕(浏览器，手机)的高度，这对响应式设计和具有巨大高度的iframe很好。 填充表示你想要的iframe上方和下方的填充，在这种情况下它贯穿整个屏幕。
$(document).height() // - $('body').offset().top
和/或
$(window).height()
参见Stack Overflow问题如何获取body元素的高度。
试着用jQuery找到身体的高度:
if $("body").height()
它没有值，如果Firebug。也许这就是问题所在。
