动态调整 iframe 大小

Question

情况： 我正在研究一种涉及典型 HTML/CSS 组合的响应式设计。除了在 div 内有 iframe 的情况下，一切都运行良好。 iframe 应自动调整为父 div 的大小。纯粹的 css 解决方案尚未出现，因此我将使用 JQuery 方法。它工作得很好，除了在一种情况下，从较小的宽度调整到较大宽度的屏幕。

HTML：

<div class="container">
    <iframe class="iframe-class" src="http://www.cnn.com/"></iframe>
</div>

CSS：

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

Javascript：

$(function () {
    setIFrameSize();
    $(window).resize(function () {
        setIFrameSize();
    });
});

function setIFrameSize() {
    var ogWidth = 700;
    var ogHeight = 600;
    var ogRatio = ogWidth / ogHeight;

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

http://jsfiddle.net/TBJ83/

问题： 随着窗口的尺寸变小，它会不断检查窗口宽度，一旦达到 iframe-class-resize 的类并将宽度和高度设置为该类。随着窗口的大小调整较大，一旦大小达到 480 像素，它就会删除该类。问题是设置宽度和高度属性将它们直接添加到元素而不是类本身。因此，删除类不会删除新的宽度和高度。我尝试使用removeAttr()（上面已注释掉）强制删除属性，但这没有用。

有人看到上面的代码哪里出错了吗？或者关于如何更有效地完成响应式 iframe 的任何建议？所需的主要内容是 iframe 必须在 <div></div> 内，并且 div 不一定要定义宽度或高度。理想情况下，父 div 应明确定义宽度和高度，但此站点当前的设置方式并不总是可行的。

补充： 如果以上内容不够清楚，请尝试以下方法重现问题：

• 在台式机上打开浏览器。我在 Windows 机器上使用 Chrome。不要最大化浏览器。
• 打开上面的 jsfiddle (http://jsfiddle.net/TBJ83/)。您会注意到 iframe 内容跨越了预览面板的整个宽度。
• 手动向下调整宽度，直到整个窗口小于 480 像素。此时，iframe 内容将非常小。
• 手动调整宽度，直到整个窗口为 >> 480 像素。目标是让 iframe 内容重新获得预览面板的整个宽度。相反，由于 .css() 函数将 css 更改直接应用于元素而不是类，因此内容会保留调整后的宽度和高度。

提前致谢！

Answer 1

您可以在大约 30 个字符内完成此操作。变化：

$(".iframe-class").removeClass("iframe-class-resize")

到：

$(".iframe-class").removeClass("iframe-class-resize").css({ width : '', height : '' })

这将重置您应用于元素的宽度/高度。当您使用.css() 时，您将传入的任何内容添加到元素的style 属性中。当你传递一个空值时，jQuery 会从元素的 style 属性中移除该属性。

这是一个更新的小提琴：http://jsfiddle.net/TBJ83/3/

编辑

好的，这里对性能进行了一些调整（以及一些其他的做事方式）：

$(function () {

    //setup these vars only once since they are static
    var $myIFRAME   = $(".iframe-class"),//unless this collection of elements changes over time, you only need to select them once
        ogWidth     = 700,
        ogHeight    = 600,
        ogRatio     = ogWidth / ogHeight,
        windowWidth = 0,//store windowWidth here, this is just a different way to store this data
        resizeTimer = null;

    function setIFrameSize() {
        if (windowWidth < 480) {

            var parentDivWidth = $myIFRAME.parent().width(),//be aware this will still only get the height of the first element in this set of elements, you'll have to loop over them if you want to support more than one iframe on a page
                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 () {

        //only run this once per resize event, if a user drags the window to a different size, this will wait until they finish, then run the resize function
        //this way you don't blow up someone's browser with your resize function running hundreds of times a second
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function () {
            //make sure to update windowWidth before calling resize function
            windowWidth = $(window).width();

            setIFrameSize();

        }, 75);

    }).trigger("click");//run this once initially, just a different way to initialize
});

Answer 2

这可以使用纯 CSS 来完成，如下所示：

iframe {
  height: 300px;
  width: 300px;
  resize: both;
  overflow: auto;
}

将高度和宽度设置为您想要的最小尺寸，它似乎只是增大，而不是缩小。

Answer 3

我会这样做，代码要短得多：http://jsfiddle.net/TBJ83/2/

<div class="container">
    <iframe id="myframe" src="http://www.cnn.com/"></iframe>
</div>

<script>
$(function () {
    setIFrameSize();
    $(window).resize(function () {
        setIFrameSize();
    });
});

function setIFrameSize() {
    var parentDivWidth = $("#myframe").parent().width();
    var parentDivHeight = $("#myframe").parent().height();
    $("#myframe")[0].setAttribute("width", parentDivWidth);
    $("#myframe")[0].setAttribute("height", parentDivHeight);
}
</script>

我这样做是为了提高阅读能力，但你可以让它更短更快......

function setIFrameSize() {
    f = $("#myframe");
    f[0].setAttribute("width", f.parent().width());
    f[0].setAttribute("height", f.parent().height());
}

一个选择器，因此您只需查看 DOM 一次而不是多次。

Answer 4

对于那些使用 Prestashop 的人，这就是我使用代码的方式。

在 cms.tpl 文件中我添加了以下代码：

{if $cms->id==2}
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type="text/javascript" src='../themes/myheme/js/formj.js'></script>
<div style="width: 100%; height: 800px;">
<iframe style=" width: 100%; height: 100%; border: overflow: auto;" src="https://cnn.com"></iframe>
</div>
{/if}

然后新建一个js文件：formj.js并添加如下代码：

$(function () {

    //setup these vars only once since they are static
    var $myIFRAME   = $(".iframe-class"),//unless this collection of elements changes over time, you only need to select them once
        ogWidth     = 970,
        ogHeight    = 800,
        ogRatio     = ogWidth / ogHeight,
        windowWidth = 0,//store windowWidth here, this is just a different way to store this data
        resizeTimer = null;

    function setIFrameSize() {
        if (windowWidth < 480) {

            var parentDivWidth = $myIFRAME.parent().width(),//be aware this will still only get the height of the first element in this set of elements, you'll have to loop over them if you want to support more than one iframe on a page
                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 () {

        //only run this once per resize event, if a user drags the window to a different size, this will wait until they finish, then run the resize function
        //this way you don't blow up someone's browser with your resize function running hundreds of times a second
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function () {
            //make sure to update windowWidth before calling resize function
            windowWidth = $(window).width();

            setIFrameSize();

        }, 75);

    }).trigger("click");//run this once initially, just a different way to initialize
});