使用 jQuery 控制 iframe 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/934323/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Control iframe height with jQuery
提问by Saravanan
I am using jQuery to control the height of an iframe.
我正在使用 jQuery 来控制 iframe 的高度。
jQuery("iframe",top.document).contents().height();
This works when the height of the iframe increases. When the height decreases it does not work. It returns the old value only. Why is this happening?
这在 iframe 的高度增加时起作用。当高度降低时，它不起作用。它仅返回旧值。为什么会这样？
回答by Tom
i use the following and it works perfectly...
我使用以下，它完美地工作......
$("#frameId").height($("#frameId").contents().find("html").height());
of course just when it's called (no "autoresize")... but it works increasing as decreasing
当然，就在它被调用时（没有“自动调整大小”）......但它会随着减少而增加
回答by Jose Basilio
It works for me If I set it and retrieve it without using .contents(). Please see my example below.
如果我设置它并在不使用.contents(). 请看我下面的例子。
function changeFrameHeight(newHeight){
jQuery("iframe",top.document).height(newHeight);
alert("iframe height=" + jQuery("iframe",top.document).height());
}
EDIT:If I understand correctly, you are trying to get rid of the scroll bars by calling the increment and go back to the original height by calling decrement.
编辑：如果我理解正确，您正试图通过调用增量来摆脱滚动条，并通过调用减量返回到原始高度。
After doing multiple tests across different browsers. Here's the code that works in FF, IE, Chrome, Safari and Opera.
在跨不同浏览器进行多次测试后。这是适用于 FF、IE、Chrome、Safari 和 Opera 的代码。
//first declare a variable to store the original IFrame height.
var originalHeight = $("iframe",top.document).height();
Change your heightIncrementfunction to use the following:
更改您的heightIncrement函数以使用以下内容：
heightIncrement:function(){
var heightDiv = jQuery("iframe",top.document).contents().find('body').attr('scrollHeight');
jQuery("iframe",top.document).css({height:heightDiv});
}
Change your heightDecrementfunction to use the following:
更改您的heightDecrement函数以使用以下内容：
heightDecrement:function(){
jQuery("iframe",top.document).css({height:originalHeight});
}
回答by InfinitiesLoop
This is ancient but hopefully it helps.
这是古老的，但希望它有所帮助。
Seems like Chrome (or maybe all of webkit, not sure) has a bug where the scrollHeight can increase but not decrease (at least in the case of content in an iframe). So if the content grows, then shrinks, the scrollOffset stays at the higher level. That's not very nice when you are attempting to make the iframe's height just big enough for it's ever-changing content.
似乎 Chrome（或者可能是所有 webkit，不确定）有一个 bug，scrollHeight 可以增加但不能减少（至少在 iframe 中的内容的情况下）。所以如果内容增长，然后缩小，scrollOffset 保持在更高的水平。当您尝试使 iframe 的高度足够大以容纳不断变化的内容时，这不是很好。
A hack workaround is to make it recalculate the height by setting the height to something definitely small enough to cause the iframe's height to be smaller than it's content, then the scrollHeight is reset.
一个 hack 解决方法是通过将高度设置为足够小的东西来重新计算高度，从而使 iframe 的高度小于它的内容，然后重置 scrollHeight。
var frame = top.document.getElementById('iFrameParentContainer').getElementsByTagName('iframe')[0];
var body = frame.contentWindow.document.body;
var height = body.scrollHeight; // possibly incorrect
body.height = "1px";
height = body.scrollHeight; // correct
This can cause a slight flicker but normally doesn't, at least, it works on my machine (tm).
这可能会导致轻微的闪烁，但通常不会，至少，它在我的机器上工作 (tm)。
回答by Saravanan
At the time of loading I call this function
在加载时我调用这个函数
heightIncrement:function(){
if($.browser.mozilla)
{
var heightDiv = jQuery("iframe",top.document).contents().attr("height")+"px";
jQuery("iframe",top.document).css({height:heightDiv});
}
else if($.browser.opera || $.browser.safari || $.browser.msie)
{
var heightDiv = jQuery("iframe",top.document).height();
jQuery("iframe",top.document).css({height:heightDiv});
}
}
if I use without contents() it returns zero.
如果我不使用 contents() 则返回零。
回答by Carlos Quintero
This is a simple jQuery that worked for me. Tested in iExplorer, Firefox and Crome:
这是一个对我有用的简单 jQuery。在 iExplorer、Firefox 和 Crome 中测试：
$('#my_frame').load(function () {
$(this).height($(this).contents().find("html").height()+20);
});
I add 20 pixels just to avoid any scroll bar, but you may try a lower bound.
我添加 20 像素只是为了避免出现任何滚动条，但您可以尝试使用下限。
回答by XuDing
I have successfully resize iframe's height and width when it is loaded. basically you can do this as below, and I also post a small article on my blog: http://www.the-di-lab.com/?p=280
加载时，我已成功调整 iframe 的高度和宽度。基本上你可以这样做，我还在我的博客上发表了一篇小文章：http: //www.the-di-lab.com/?p= 280
$(".colorbox").colorbox(
{iframe:true,
innerWidth:0,
innerHeight:0,
scrolling:false,
onComplete:function(){
$.colorbox.resize(
{
innerHeight:($('iframe').offset().top + $('iframe').height()),
innerWidth:($('iframe').offset().left + $('iframe').width())
}
);
}
}
);
回答by dsjoerg
回答by Idham Perdameian
i use this :
我用这个：
$('#iframe').live('mousemove', function (event) {
var theFrame = $(this, parent.document.body);
this.height($(document.body).height() - 350);
});
$('#iframe').live('mousemove', function (event) {
var theFrame = $(this, parent.document.body);
this.height($(document.body).height() - 350);
});
回答by user482024
I'm not sure if people are satisfied with their methods but I've written up a very very simple approach that seems to work quite well for me, in the newest of Safari, Chrome, IE9, Opera and Firefox.
我不确定人们是否对他们的方法感到满意，但我已经编写了一个非常非常简单的方法，在最新的 Safari、Chrome、IE9、Opera 和 Firefox 中似乎对我来说效果很好。
I had a problem resizing a google calendar fed iFrame so I've just made a default size to it in the iFrame's style: width="600" and height settings of basically the maximum I would want, 980 I believe, then wrapped that in a container Div with height and width at 100% and min-height and min-width at 400px and 300px respectively , and then added some jQuery to run at onload and onresize...
我在调整谷歌日历的 iFrame 大小时遇到了问题，所以我刚刚在 iFrame 的样式中为其设置了默认大小：width="600" 和高度设置基本上是我想要的最大值，我相信是 980，然后将其包裹在一个高度和宽度分别为 100% 和 min-height 和 min-width 分别为 400px 和 300px 的容器 Div ，然后添加了一些 jQuery 以在 onload 和 onresize 时运行...
<script>
var resizeHandle = function(){
var caseHeight = $('#calendarCase').height();
var caseWidth = $('#calendarCase').width();
var iframeWidth = $('#googleCalendar').width(caseWidth - 10);
var iframeHeight = $('#googleCalendar').height(caseWidth - 10);;
};
</script>
<body id ="home" onLoad="resizeHandle()" onResize="resizeHandle()">
so to clarify, the resize function runs onLoad because I am targetting mobile phones and tablets in my responsive design, which takes the height and width of the calendarCase div and sets the height and width of the iframe (#googleCalendar) accordingly, minus 10 pixes for some padding.
澄清一下，resize 函数在 onLoad 上运行是因为我在响应式设计中针对的是手机和平板电脑，它采用了 calendarCase div 的高度和宽度，并相应地设置了 iframe (#googleCalendar) 的高度和宽度，减去 10 个像素一些填充。
editI forgot to mention that I've used the caseWidth to set the height of the iFrame in order to keep the proportions constrained and somewhere square.
编辑我忘了提到我已经使用 caseWidth 来设置 iFrame 的高度，以保持比例受限和某个地方的正方形。
This has worked fine so far, if anyone has any ideas why it might not be stable please advise,
到目前为止，这一切正常，如果有人有任何想法为什么它可能不稳定，请提供建议，
cheers
干杯
