Fancybox iframe изменить как изменить высоту в onUpdate?

Question

[Valeriy Donika]

Не могу никак понять как мне изменить высоту в форме.
Форма в айфрейме. У неё есть скрытые блоки, когда я кликаю на элемент элементы появляются, и изменятся высота айфрейма, появляется скроллинг. Как мне изменять высоту айфрейма?

$('#fastorder').click(function () {
            var $prnt = $(this).parents('.prod-info'),
                pid = $prnt.data('id');
            $('#fastorder').fancybox({ 
                padding:0,
                width:650,
                height:400,
                autoResize:true,
                autoCenter:true,
                fitToView:true,
                autoSize:false,
                type:'iframe',
                href:'/fast-order.php?pid='+pid,
                wrapCSS: 'order-box',
                onUpdate: function() {
                       тут прибавить высоту 
                        
                }
            });
            
        });

Answer 1

[Михаил Горячкин]

Вообще iframe довольно-таки хреновая идея, но раз уж вы запилили через него, тогда можно сделать что-то типа этого:

function autoResize(selector) {
    var newheight, newwidth, frame = document.querySelector(selector);
    if (frame) {
        newheight = frame.contentWindow.document.body.scrollHeight;
        newwidth = frame.contentWindow.document.body.scrollWidth;
        frame.height= (newheight) + "px";
        frame.width= (newwidth) + "px";
    } else {
        console.warn('Не чего не найдено!');
    }
}

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

Answer 2

[Valeriy Donika]

помогло это, обращаться к нему через parent. По клику вызывать OnResize();

function OnResize() {
            parent.$('.fancybox-inner').css('height', 'auto');
            parent.$('.fancybox-outer').css('height', 'auto');
            parent.$('.fancybox-wrap').css('height', 'auto');
            parent.$('.fancybox-skin').css('height', 'auto');
            //parent.$('.fancybox-iframe').css('height', 'auto');
            var DivH = $('#order').height() + parseInt($('#order').css('padding-top'))*2;
            wrTop = (parent.$('.fancybox-overlay').height()-DivH)/2;
            if(wrTop < 0){
                wrTop = 0;
                DivH = parent.$('.fancybox-overlay').height();
            }
            parent.$('.fancybox-iframe').css('height', DivH);
            parent.$('.fancybox-inner').css({'height': DivH});
            parent.$('.fancybox-wrap').css({'top': wrTop});
       }