如何使 iframe-resizer 动态应用 minHeight 值？

Question

我正在使用 https://github.com/davidjbradshaw/iframe-resizer 库并按照其作者的建议，在这里问我的问题。

我有一个 Angular 应用程序加载到 iframe 中，这个应用程序有一些元素位于底部 "absolute" 或 "fixed"。这意味着帧收缩将无法使用默认方法正常工作，我发现 heightCalculationMethod: "taggedElement" 在我的情况下是最可靠的。但只有一个问题。我的页面使用 ui-router 进行动画状态更改，现在在动画期间，帧高度设置为 0，使动画不可见。所以我发现我需要为 iframe-resizer 使用 minHeight 选项。它通常工作正常，我通常将其设置为 minHeight: window.innerHeight - 45，其中 45 是我的页面在 iframe 之外的高度。

但我希望 iframe-resizer 在每次调整大小时重新计算 minHeight 因为用户可能已经调整了他的浏览器 window.

我想，如果 iframe-resizer 接受 minHeight 的功能，它会起作用，所以我可以这样做：

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

但我发现目前它只是在初始设置期间执行 addStyle('minHeight');，所以我的解决方案不起作用。

使 iframe-resizer 与动态 minHeight 一起工作的最佳方法是什么？

Answer 1

我不相信这会在不与 iframeResizer 冲突的情况下按预期工作，但它现在似乎可以工作。如果没有更好的解决方案，我将其张贴在这里供人们尝试和改进：

(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 === null || typeof(object) === 'undefined') return;
    if (object.addEventListener) {
        object.addEventListener(type, callback, false);
    } else if (object.attachEvent) {
        object.attachEvent("on" + type, callback);
    } else {
        object["on"+type] = callback;
    }
};

function minResizeFrame(){
    document.getElementById("appFrame")
            .style.minHeight = (window.innerHeight - 45) + "px";
    // 45 is my cumulative height of elements outside of iframe. you will need custom value for your project
}

addEvent(window, "resize", minResizeFrame);

iFrameResize({
    // taggedElement is the most reliable method to shrink and grow the frame
    // lowestElement also kinda works, but it does not shrink the frame height 
    // if there are fixed or absolute positioned elements at the bottom of the inner page
    heightCalculationMethod: "taggedElement",
    log: true
});

//call immediately on load
minResizeFrame();

})();

Answer 2

我预计 iFrame 缩小为零的原因是页面上的元素比页脚高出 X 像素，因此每次调整框架大小时都会缩小那么多。尝试向该元素的底部添加填充以阻止这种情况发生，或者使用容差选项。

也就是说，您似乎希望页面 minSize 与父级 window 的大小相关。在 IE9 中，理论上你应该能够用 CSS.

做到这一点

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

对于 IE8，这里是您的答案的一个稍微简单的版本。它消除了对 getElementById 的昂贵调用的需要，并且更加通用。

(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);
        }
    });

})();

如何使 iframe-resizer 动态应用 minHeight 值？

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

javascript

html

iframe

iframe-resizer