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

Question

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

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

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

page: http://jsfiddle.net/PmBrd/

Есть идеи?

Answer 1

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

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

Код:

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

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

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

Answer 2

Проверьте это.Вы можете получить размер 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>

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

Answer 3

может быть немного поздно, так как все остальные ответы с 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
        });
    });
});

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

Answer 4

Ответ Эсайлии работает отлично, но это приятнее, мне кажется.

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

Answer 5

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

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

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