How to make iframe-resizer to dynamically apply minHeight value?

I am using https://github.com/davidjbradshaw/iframe-resizer library and as suggested by its author, asking my question here.

I have an Angular application loaded into iframe and this application has some elements positioned at the bottom with "absolute" or "fixed". This means, that frame shrinking will not work properly with default methods and I find heightCalculationMethod: "taggedElement"to be the most reliable in my case. But there is just one issue. My page is using ui-router with animated state changes, and now during animation, the frame height gets set to 0 making animation invisible. So I figured out that I need to use minHeight option for iframe-resizer. It generally works fine, I usually set it up to be minHeight: window.innerHeight - 45 where 45 is the height of my page outside the iframe.

But I would like iframe-resizer to recalculate minHeight each time when resizing because user might have resized his browser window.

I guess, it would work if iframe-resizer accepted function for minHeight, so I could do it like this:

minHeight: function(){ return window.innerHeight - 45; }

But I see that currently it just does addStyle('minHeight'); during initial setup, so my solution would not work.

What would be the best way to make iframe-resizer to work with dynamic minHeight?

I expect the reason that the iFrame shrinks to zero is that the element that you have on the page is X number of px above your footer, so each time you resize the frame shrinks that much. Try adding padding to the bottom of this element to stop that happening, or play with the tolerance option.

That said it seem you want the page minSize to relate to the size of the parent window. In IE9 up you should in theory be able to do this with just CSS.

min-height: calc(100vh - 45px);

For IE8, here a slightly simpler version of your answer. It cuts out the need for the expensive call to getElementById and is a bit more generic.

(function() {
    'use strict';

    // iframe.minHeight gets set only once, but we need to ensure our frame
    // is at least as high as current browser window+outer elements
    // for animations to work without collapsing the frame to 0,
    // therefore we control minHeight ourselves monitoring windoww.resize event

    // cross-browser helper function
    function addEvent(object, type, callback) {
        if (object.addEventListener) {
            object.addEventListener(type, callback, false);
        } else if (object.attachEvent) {
            object.attachEvent("on" + type, callback);
        }
    };

    function minResizeFrame(iframe,offset){
        iframe.style.minHeight = (window.innerHeight - offset) + 'px';
    }

    iFrameResize({
        heightCalculationMethod: 'taggedElement',
        log: true,
        initCallback: function(iframe){
            var offset = 45;
            addEvent(window, 'resize', minResizeFrame.bind(undefined,iframe,offset));
            minResizeFrame(iframe,offset);
        }
    });

})();