使用 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 我已经设置了链接的 html 和 body height: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 url 设置为与 jsfiddle 结果 iframe 相同域中的 url，即 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.

更新:
@尤斯:似乎您的页面出于奇怪的原因没有正确设置主体高度，因此请尝试使用主要元素的高度，如下所示:

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屋！