動態調整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/

問題： 由於窗口被調整大小時，它持續的檢查窗口寬度，並且一旦它擊中< 480像素，所述代碼添加一個名爲iframe-class-resize類，並且設置的寬度和高度，以該類。由於窗口的大小調整得較大，一旦尺寸達到480像素，它就會刪除該類。問題是設置寬度和高度屬性直接將它們添加到元素而不是類本身。因此，刪除類不會刪除新的寬度和高度。我試圖強制使用removeAttr()（上面註釋）去除這些屬性，但那不起作用。

任何人都可以看到上面的代碼出錯了嗎？或者有關如何更有效地完成響應式iframe的建議？需要的主要事情是iframe必須在<div></div>之內，並且div可能不一定具有定義的寬度或高度。理想情況下，父div應該明確定義寬度和高度，但是該網站目前的設置方式並不總是可行。

附加： 如果上面是不夠清楚，請嘗試以下操作重現該問題：

• 打開一個桌面計算機上的瀏覽器。我在Windows機器上使用Chrome。不要最大化瀏覽器。
• 打開上面的jsfiddle（http://jsfiddle.net/TBJ83/）。您會注意到，iframe內容跨越了「預覽」面板的整個寬度。
• 手動調整寬度的大小，直到整個窗口爲< 480px。此時，iframe內容將會非常小。
• 手動調整寬度的大小，直到整個窗口爲>> 480px。目標是讓該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/

編輯

OK，（和只是一些其他的方式來做事）這裏的東西扭捏表現：

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

這是我會怎麼做，代碼更短：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 3

對於使用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 
}); 

Answer 4

這是可以做到使用純CSS如下：

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

將高度和寬度設置爲您想要的最小大小，它似乎只增長，不縮水。