Как изменить высоту iframe на основе динамического контента внутри iframe?

У меня есть iframe с динамическим содержимым. Если отвечает на конкретные вопросы, отображается дополнительная информация (скрытый элемент div становится видимым). Я бы хотел, чтобы высота iframe увеличивалась. Я знаю, что этот вопрос задавался здесь несколько раз, но похоже, что обычно это происходит при загрузке другой страницы в iframe, а не при динамическом изменении содержимого в iframe.

Вот пример, который я пытался собрать с помощью jsFiddle:

iframe: http://jsfiddle.net/B4AKc/2/

страница: http://jsfiddle.net/PmBrd/

Есть идеи?


dynamic iframe jquery height
person Michael    schedule 26.11.2011    source источник
comment
Это все еще трудная проблема. Вот лучший ответ на SO: stackoverflow.com/questions/153152/   -  person Gregg B    schedule 26.11.2011
comment
Находится ли контент из iframe в том же домене, что и страница, содержащая iframe?   -  person dSquared    schedule 26.11.2011
comment
тот же домен? черт возьми, я думал, что получил быстрый и простой ответ!   -  person pythonian29033    schedule 19.03.2014

Ответы (5)


arrow_upward
11
arrow_downward

Это работает для вас?

http://jsfiddle.net/PmBrd/1/

Код:

var iframe = document.getElementById("ifr").contentWindow;

iframe.$(".toggle_div").bind("change", function () {
    $("#ifr").css({
        height: iframe.$("body").outerHeight()
    });
});

Поскольку вы упомянули, что они находятся в одном домене, нужно просто сделать что-то подобное с вашим реальным приложением.

person Esailija    schedule 26.11.2011

arrow_upward
5
arrow_downward

Проверьте это. Вы можете получить размер iframe с помощью самого javascript.
Используя setInterval, каждый раз проверяйте высоту окна.

< iframe src='<YOUR_URL>' frameborder='0' scrolling='no' id='frame_id' style='overflow:hidden; width:984px;' >
</iframe>

<script language="javascript" type="text/javascript">
setInterval(function(){
    document.getElementById("frame_id").style.height = document.getElementById("frmid").contentWindow.document.body.scrollHeight + 'px';
},1000)
</script>

Проверьте это

person Eugine Joseph    schedule 22.04.2013

arrow_upward
1
arrow_downward

Ответ Эсаилии работает нормально, но это лучше.

$('#ifr').contents($(".toggle_div")).bind("change", function () {
    $("#ifr").height($("#ifr").contents().find("html").height());
});
person olofom    schedule 05.03.2013

arrow_upward
1
arrow_downward

может быть немного поздно, так как все остальные ответы относятся к 2011 году :-), но... вот мое решение. Протестировано в реальном FF, Chrome и Safari 5.0

$(document).ready(function(){
    $("iframe").load( function () {
        var c = (this.contentWindow || this.contentDocument);
        if (c.document) d = c.document;
        var ih = $(d).outerHeight();
        var iw = $(d).outerWidth();
        $(this).css({
            height: ih,
            width: iw
        });
    });
});

Надеюсь, это поможет кому-нибудь.

person ddlab    schedule 25.12.2013

arrow_upward
0
arrow_downward

Взгляните на плагин jQuery postMessage. Он позволяет передавать информацию из дочернего фрейма в родительский. Вы можете изменить код внутри дочернего фрейма, чтобы опубликовать высоту содержимого родительскому элементу при изменении содержимого, который затем родительский элемент может использовать для соответствующего изменения размера iframe.

Для работы две страницы должны находиться в одном домене.

Надеюсь, это поможет!

person dSquared    schedule 26.11.2011