logo标签列表

使用jQuery控制iframe高度

jqueryhtmliframe
20

我正在使用jQuery来控制iframe的高度。

jQuery("iframe",top.document).contents().height();

当 iframe 的高度增加时，这段代码可以工作。但当高度减少时，它就无法正常工作了。它只能返回旧值。为什么会这样呢？

@José Basilio - 是的，我获取了 Iframe 内容的高度并将其设置到了 Iframe 中。 - Saravanan
@porneL - 你能否解释一下如何找到Iframe的对象或特征？ - Saravanan
@Saravanan - 请阅读我编辑过的帖子。 - Jose Basilio
@José Basilio - 抱歉，它只返回零。我是使用iframe父Div高度来获取高度的。它运行良好。无论如何，感谢您的帮助，它对我在其他地方有所帮助。 - Saravanan
9个回答
31

我使用以下代码，它完美运行...

$("#frameId").height($("#frameId").contents().find("html").height());
当然，仅限于调用时（不使用“autoresize”）……但它可以随着增加和减少而工作。
5
我认为这在跨域情况下不会起作用。如果您有解决方案，请帮忙。 - Sanket Sahu
1
我在使用ie9时遇到了问题，但是将"html"替换为"body"就解决了，即：$("#frameId").height($("#frameId").contents().find("body").height()); - tocallaghan
非常出色的工作！在所有浏览器中，使用“body”而不是“html”运行得非常好！ - doniyor
5
如果我在不使用.contents()的情况下设置并检索它，它对我起作用。请见下面的示例。
function changeFrameHeight(newHeight){
  jQuery("iframe",top.document).height(newHeight);
  alert("iframe height=" + jQuery("iframe",top.document).height());
}

编辑：如果我理解正确的话，你正在尝试通过调用增量来去除滚动条，并通过调用减量返回原始高度。

在不同的浏览器上进行多次测试后，以下是适用于FF、IE、Chrome、Safari和Opera的代码。

//first declare a variable to store the original IFrame height.
var originalHeight = $("iframe",top.document).height();

将您的 heightIncrement 函数更改为使用以下内容：

heightIncrement:function(){
 var heightDiv = jQuery("iframe",top.document).contents().find('body').attr('scrollHeight'); 
 jQuery("iframe",top.document).css({height:heightDiv});
}

将您的heightDecrement函数更改为使用以下内容：

heightDecrement:function(){
 jQuery("iframe",top.document).css({height:originalHeight});
}
3
希望这篇古老的文章能对您有所帮助。
看起来像Chrome（或者可能是所有WebKit，不确定）存在一个错误，其中scrollHeight可以增加但不能减少（至少在iframe中的内容情况下）。因此，如果内容增长然后缩小，scrollOffset保持在较高水平。当您尝试为iframe的内容不断变化的情况调整其高度时，这不太好。
一种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

这可能会导致轻微的闪烁，但通常不会。至少在我的机器上（tm）是有效的。

1
我在将高度设置为1像素时遇到了问题 - 有时候，重新计算会出错。我尝试了建议中的“auto”此答案，它似乎在更多情况下起作用。但总体而言，这似乎是绕过Chrome中的错误（？）的好方法。 - Stephen McDaniel
1
在加载时，我调用这个函数。
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()，它会返回零。

你应该使用对象/特征检测而不是浏览器检测，例如使用两种方法读取高度并查看哪种方法返回较好的结果。 - Kornel
@Saravanan - 看起来你正在尝试检索高度，然后再次将其设置为相同的值。是这样吗？ - Jose Basilio
在当今的jQuery中，使用$("..而不是jQuery("..将起作用。 - Stephan Kristyn
1

这是一个对我有效的简单jQuery。在iExplorer、Firefox和Crome中进行了测试：

 $('#my_frame').load(function () {  
      $(this).height($(this).contents().find("html").height()+20);
});

我增加了20像素，只是为了避免出现滚动条，但你可以尝试更低的数值。

0

我不确定人们是否满意他们的方法，但我已经写了一个非常简单的方法，对于我来说，在最新的Safari、Chrome、IE9、Opera和Firefox中似乎运行得很好。

我有一个问题，需要调整谷歌日历提供的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()">

为了澄清，调整大小的函数在onLoad时运行，因为我针对移动电话和平板电脑进行响应式设计，它获取calendarCase div的高度和宽度，并相应地设置iframe（#googleCalendar）的高度和宽度，减去10像素作为一些填充。

编辑我忘记提到我已经使用caseWidth来设置iFrame的高度，以保持比例约束和某处正方形。

到目前为止，这已经很好地工作了，如果有人有任何想法，为什么它可能不稳定，请建议，

谢谢

0

我已成功调整 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())
        }
        );
    }
}
);
0
如果 iframe 的源与其父级不属于同一个域名，那么您可能需要使用 easyXDM。
0
我使用这个：
``` $('#iframe').live('mousemove', function (event) { var theFrame = $(this, parent.document.body); this.height($(document.body).height() - 350); }); ```
“mousemove” 会因为被频繁触发而失效吗？ - Minqi Pan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接