使用Jquery将iframe大小调整为内容 [英] Resize iframe to content with Jquery

问题描述

我正在尝试动态调整iframe的大小以适应其内容。为此，我有一段代码：

I'm trying to resize an iframe dynamicly to fit its content. To do so I have a piece of code:

$("#IframeId").height($("#IframeId").contents().find("html").height());​

它不是工作。是因为跨域问题吗？我如何使它适合？请看一下Fiddle： JsFiddle

It doesnt work. Is it because of cross-domain issue? How do I get it to fit? Please take a look at Fiddle: JsFiddle

ps我已设置链接的高度：100％;

ps I have set the html and body of the link height:100%;

推荐答案

您只需要在iframe load 事件中应用您的代码，因此当时已知高度，代码如下：

You just need to apply your code on the iframe load event, so the height is already known at that time, code follows:

$("#IframeId").load(function() {
    $(this).height( $(this).contents().find("body").height() );
});

参见 演示 。这个演示在jsfiddle上工作，因为我已将iframe网址设置为与jsfiddle结果iframe在同一域中的网址，即 fiddle.jshell.net 域。

See working demo . This demo works on jsfiddle as I've set the iframe url to a url in the same domain as the jsfiddle result iframe, that is, the fiddle.jshell.net domain.

更新：

@Youss：
看来你的页面是一个奇怪的原因是没有正确的身高，所以尝试使用主要元素的高度，如下所示：

UPDATE:
@Youss: It seems your page for a strange reason don't get the body height right, so try using the height of the main elements instead, like this:

$(document).ready(function() {
    $("#IframeId").load(function() {
            var h = $(this).contents().find("ul.jq-text").height();
            h += $(this).contents().find("#form1").height();
            $(this).height( h );
        });
});

这篇关于使用Jquery将iframe大小调整为内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！