Question

我正在尝试根据其容器调整iframe的大小。容器是一个div，其大小是动态设置的。

我有一个this之类的仪表板。每个框的大小都由总仪表板的一定百分比设置（该大小是视口宽度的一定百分比）。我想添加一个尺寸为300 x 200像素的iframe。

我看了一下这篇帖子，它与我要寻找的内容很接近：Dynamically resize iframe

我希望我的iframe在需要时缩小。

这是我的代码：

JS

python3 your_script.py

CSS

banner = data.banner
banner_div = document.getElementById("banner")
banner_div.innerHTML = "<iframe class='iframe-class' src='"+ banner + "' frameBorder='0' scrolling='no'></iframe>"

$(function () {
    var $myIFRAME   = $(".iframe-class"),
        ogWidth     = 300,
        ogHeight    = 250,
        ogRatio     = ogWidth / ogHeight,
        windowWidth = 0,
        resizeTimer = null;

    function setIFrameSize() {
        if (windowWidth < 480) {
            var parentDivWidth = $myIFRAME.parent().width(),
                newHeight      = (parentDivWidth / ogRatio);
        $myIFRAME.addClass("iframe-class-resize").css({ height : newHeight, width : parentDivWidth });
        } else {
            $myIFRAME.removeClass("iframe-class-resize").css({ width : '', height : '' });
        }
    }

    $(window).resize(function () { 
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function () {
            windowWidth = $(window).width();
            setIFrameSize();
        }, 75);
    }).trigger("click");
});

HTML

.iframe-class {
    width: 100%;
    height: 100%;
    border: 1px solid red;
    overflow: auto;
}

更改框大小，但内部iframe不变时，红色边框的大小正确。无论框的高度或宽度如何，我怎么能完全看到iframe？

如何根据其动态容器调整iframe的大小？

0 个答案: