使用jQuery控制iframe高度
我使用jQuery来控制iframe的高度使用jQuery控制iframe高度,jquery,html,iframe,Jquery,Html,Iframe,我使用jQuery来控制iframe的高度 jQuery("iframe",top.document).contents().height(); 当iframe的高度增加时，此选项起作用。当高度降低时，它不起作用。它只返回旧值。为什么会发生这种情况？如果我在不使用.contents（）的情况下设置并检索它，它对我很有效。请看我下面的例子 function changeFrameHeight(newHeight){ jQuery("iframe",top.document).height
jQuery("iframe",top.document).contents().height();
当iframe的高度增加时，此选项起作用。当高度降低时，它不起作用。它只返回旧值。为什么会发生这种情况？如果我在不使用
.contents（）function changeFrameHeight(newHeight){
jQuery("iframe",top.document).height(newHeight);
alert("iframe height=" + jQuery("iframe",top.document).height());
}
//first declare a variable to store the original IFrame height.
var originalHeight = $("iframe",top.document).height();
heightIncrement:function(){
var heightDiv = jQuery("iframe",top.document).contents().find('body').attr('scrollHeight');
jQuery("iframe",top.document).css({height:heightDiv});
}
heightDecrement:function(){
jQuery("iframe",top.document).css({height:originalHeight});
}
heightIncrement:function(){
var heightDiv = jQuery("iframe",top.document).contents().find('body').attr('scrollHeight');
jQuery("iframe",top.document).css({height:heightDiv});
}
heightDecrement:function(){
jQuery("iframe",top.document).css({height:originalHeight});
}
在加载时，我调用这个函数
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});
}
}
如果我不使用contents（），它将返回零。我使用以下命令，它可以完美地工作
$("#frameId").height($("#frameId").contents().find("html").height());
当然，当它被调用时（没有“自动调整大小”）。。。但它的作用是随着减少而增加，这是古老的，但希望能有所帮助 看起来Chrome（或者可能是所有webkit，不确定）有一个bug，滚动高度可以增加，但不能减少（至少在iframe中的内容）。因此，如果内容增长，然后收缩，scrollOffset将保持在较高的级别。当您试图使iframe的高度刚好足以容纳不断变化的内容时，这不是很好 黑客的解决方法是将高度设置为足够小的值，使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
这可能会导致轻微闪烁，但通常不会，至少在我的机器（tm）上不起作用。加载iframe时，我已成功调整iframe的高度和宽度。基本上你可以这样做，如下所示，我也在我的博客上发表了一篇小文章： $（“.colorbox”）.colorbox( {iframe:true， 内部宽度：0， 内部高度：0， 滚动：false， onComplete:function（）{ $.colorbox.resize( { 内部高度：（$（'iframe'）.offset（）.top+$（'iframe'）.height（））， innerWidth:（$（'iframe'）.offset（）.left+$（'iframe'）.width（）） } ); } } );
如果iframe源与其父域不同，则可能需要使用。我使用以下方法： $（'iframe'）.live（'mousemove'，函数（事件）{ var theFrame=$（这是parent.document.body） this.height（$（document.body）.height（）-350）；
});
我不确定人们是否对他们的方法感到满意，但我已经写了一个非常简单的方法，在最新的Safari、Chrome、IE9、Opera和Firefox中，它似乎对我很有效 我在调整google calendar Feed iFrame的大小时遇到了问题，所以我刚刚在iFrame的样式中为它设置了一个默认大小：width=“600”，高度设置基本上是我想要的最大值，我相信是980，然后将其包装在一个容器Div中，高度和宽度分别为100%，最小高度和最小宽度分别为400px和300px，然后添加了一些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()">
var resizeHandle=函数（）{
var casehight=$（'#calendarCase'）.height（）；
var caseWidth=$（'#calendarCase'）.width（）；
var iframeWidth=$（“#谷歌日历”）.width（caseWidth-10）；
var iframehight=$（“#谷歌日历”）.height（caseWidth-10）；；
};
干杯这是一个对我有用的简单jQuery。在iExplorer、Firefox和Crome中测试：
$('#my_frame').load(function () {
$(this).height($(this).contents().find("html").height()+20);
});
我添加20像素只是为了避免任何滚动条，但您可以尝试一个下限 您应该使用对象/特征检测，而不是浏览器检测，例如，使用这两种方法读取高度，然后查看哪个方法返回良好结果。@Saravanan-看起来您正在尝试检索高度，然后再次设置为相同的值。对吗？在今天的JQuery中使用$（“。而不是JQuery（”..将起作用。@JoséBasilio-是的，我找到了Iframe内容的高度并设置为Iframe。@porneL-你能解释一下如何找到Iframe的对象或功能吗？@Saravanan-请阅读我编辑的帖子。@JoséBasilio-很抱歉，它只返回零。我使用Iframe父Div height获得高度。它工作正常。无论如何，谢谢你的帮助在其他地方为我提供帮助。我认为这不适用于跨域。如果您对此有解决方案，请提供帮助。我在ie9中遇到了问题，使用“body”代替“html”为我整理了它，即，
$（“#frameId”）.height（$（“#frameId”）.contents（）.find（“body”）.height（）；