Как да променя височината на iframe въз основа на динамично съдържание в рамките на iframe?

Имам iframe с динамично съдържание. Ако отговаря на конкретни въпроси, се показва допълнителна информация (скритият div става видим). Бих искал височината на 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

Отговорът на Esailija работи добре, но това е по-хубаво imo.

$('#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