Fancybox iframe change how to change height in onUpdate?

Question

JavaScript

I can't figure out how to change the height of the form.
iframe form. It has hidden blocks, when I click on an element, the elements appear, and the height of the iframe changes, scrolling appears. How can I change iframe height?

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

In general, an iframe is a pretty shitty idea, but since you have already washed through it, then you can do something like this:

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('Не чего не найдено!');
    }
}

This is the f-th you will need to call every time you want to recalculate the size. You can pass any selector to it to find the current iframe.

Answer 2

it helped, to address it through parent. On click, call 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});
       }