动态调整iframe的大小 [英] Dynamically resize iframe

问题描述

情况：
我正在开发一个涉及典型HTML / CSS组合的响应式设计。一切都很好地工作，除非在一个div中有一个iframe。 iframe应自动调整为父div的大小。一个纯CSS解决方案没有呈现自己，所以我将使用JQuery方法。

Situation: I'm working on a responsive design that involves the typical HTML/CSS combo. Everything is working nicely except in one case where there is an iframe inside of a div. The iframe should adjust automatically to the size of the parent div. A purely css solution has not presented itself so I'm going with a JQuery approach. It works nicely except in one scenario, when resizing from a smaller width to a larger width screen.

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： b

$(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/

问题：
当窗口被缩小尺寸时，它不断地检查窗口宽度， 480 px，代码添加一个类 iframe-class-resize ，并将宽度和高度设置为该类。当窗口大小调整大小，它删除类一旦大小达到480像素。问题是，设置width和height属性将它们直接添加到元素而不是类本身。因此，删除类不会删除新的宽度和高度。我试图强制删除属性使用 removeAttr（）（注释掉上面），但是没有工作。

Problem: As the window is resized smaller, it continually checks the window width and once it hits < 480 px, the code adds a class called iframe-class-resize and sets the width and height to that class. As the window is resized larger, it removes the class once the size hits 480 px. The problem is that setting the width and height attributes adds them directly to the element and not the class itself. Therefore, removing the class does not remove the new width and heights. I tried to force removing the attributes using removeAttr() (commented out above) but that didn't work.

任何人都看到上面的代码出错了？或任何建议如何更有效地完成有响应iframe？所需要的主要的东西是iframe必须在< div>< / div> 里，div不必定义宽度或高度。理想情况下，父div应该具有明确定义的宽度和高度，但是网站当前的设置方式，并不总是可能的。

Anyone see where the code above went wrong? Or any suggestions on how to accomplish having a responsive iframe more effectively? The main things that are required are that the iframe has to be inside the <div></div> and the div may not necessarily have a width or height defined. Ideally, the parent div should have the width and height explicitly defined but the way this site is currently setup, that won't always be possible.

如果上述情况不够清楚，请尝试以下操作重现此问题：

Additional: In case the above wasn't clear enough, try the following to reproduce the issue:

• 打开桌面机上的浏览器。我在Windows机器上使用Chrome。


• 打开上面的jsfiddle（ http：// jsfiddle.net/TBJ83/ ）。您会注意到iframe内容跨越预览面板的整个宽度。


• 手动调整宽度，直到整个窗口小于< 480px。此时，iframe内容将非常小。


• 手动调整宽度，直到整个窗口大小为>> 480px。目标是让iframe内容重新获得预览面板的整个宽度。相反，内容保留了调整后的宽度和高度，因为 .css（）函数将css更改直接应用到元素而不是类。

• Open up a browser on a desktop machine. I'm using Chrome on a Windows machine. Don't maximize the browser.
• Open up the jsfiddle above (http://jsfiddle.net/TBJ83/). You'll notice that the iframe content spans the entire width of the Preview panel.
• Manually resize the width down until the entire window is < 480px. At this point, the iframe content will be pretty tiny.
• Manually resize the width back up until the entire window is >> 480px. The goal is to have that iframe content to regain the entire width of the Preview panel. Instead, the content is retaining the resized width and height since the .css() function applies css changes directly to elements rather than to the classes.

提前感谢！

推荐答案

约30个字符。变更：

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

到：

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

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

This will reset the width/height you applied to the element. When you use .css() you add whatever you pass-in to the style attribute of the element. When you pass a blank value, jQuery removes that property from the style attribute of the element.

更新小提琴： http://jsfiddle.net/TBJ83/3/

EDIT

好的，这里是为了表演而改变的东西/ p>

OK, here's something tweaked for performance (and just some other ways to do things):

$(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
});

这篇关于动态调整iframe的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！