如何使框架调整器动态应用minHeight值

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

本文关键字：应用 minHeight 动态 调整器 何使 框架      更新时间：2023-09-26

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

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

但是我希望框架调整器在每次调整大小时重新计算minHeight，因为用户可能已经调整了浏览器窗口的大小。

我想，如果框架调整器接受minHeight的功能，它会工作的，所以我可以这样做:

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

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

使框架调整器与动态minHeight一起工作的最佳方法是什么?

我认为iFrame缩小到零的原因是页面上的元素在页脚上方X个px，所以每次调整帧的大小都会缩小那么多。尝试在该元素的底部添加padding来阻止这种情况的发生，或者使用tolerance选项。

也就是说，您似乎希望页面minSize与父窗口的大小相关。在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);
        }
    });
})();

我不相信这会像预期的那样工作而不与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();
})();
相关文章：