1

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

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

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

我想，如果 iframe-resizer 接受函数 for ，它会起作用minHeight，所以我可以这样做：

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

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

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

4

2 回答 2

2

我预计 iFrame 缩小为零的原因是页面上的元素是页脚上方的 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);
        }
    });

})();
于 2015-08-24T18:52:27.563 回答
0

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

})();
于 2015-08-20T14:18:25.363 回答