Question

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

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

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

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

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

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

使iframe-resizer与动态minHeight配合使用的最佳方法是什么？

Answer 1

我希望iFrame收缩到零的原因是页面上的元素是页脚上方的x个x倍数，因此每次调整框架大小都会缩小。尝试在此元素的底部添加填充以停止发生这种情况，或者使用容差选项。

那说好像你希望页面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);
        }
    });

})();

Answer 2

我不相信这会在没有与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();

})();

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

2 个答案: