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

Question

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

我有一个 Angular 应用程序加载到 iframe 中，这个应用程序有一些元素位于底部，带有“绝对”或“固定”。这意味着，框架收缩将无法使用默认方法正常工作，我发现 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 像素，因此每次调整框架大小时都会缩小那么多。尝试向该元素的底部添加填充以阻止这种情况发生，或者使用容差选项。

也就是说，您似乎希望页面 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);
        }
    });

})();