使iframe展開/摺疊

Question

我在合併應用程序的頁面（它充當應用程序容器）的頁面中有幾個應用程序。

我想在某處添加一個按鈕，以便將iframe展開並摺疊爲頁面的完整大小。

該應用程序現在有一個菜單，頁眉，頁腳等和iframe中的應用程序。當用戶點擊「+」按鈕時，我想將iframe展開到整個頁面，並使其他所有內容都看不見。當他們再次點擊它時，我想返回原始大小。

也許已經寫了一些東西可以做到這一點，我試圖在iframe上做一些js，並且似乎很難編寫獨立於瀏覽器的代碼。

我無法使用HTML5，因爲我們需要支持IE7。

Answer 1

An example.

基本上，只要給你的擴展iframe這些CSS屬性，

position: absolute; 
top: 0; left: 0; 
width: 100%; height: 100%; 
z-index: 10; 

它會填充它的（相對）父項。

Answer 2

來源："Full screen" <iframe>

您可以使用傳統的JS或jQuery來實現這一目標。 jQuery是一個JS庫，旨在以一種理智的方式允許跨瀏覽器的DOM處理。

如果我是你，我可能它的代碼爲（使用jQuery）：

$('iframe#myid').click(function() { 
    $('iframe#' + current).removeClass('current'); 
    $('iframe#myid').addClass('current'); 
    var current = '#myid'; 
}); 

與CSS代碼：

body, iframe { 
    margin: 0px; //to normalize the default stylesheet applied by the browser 
} 

iframe.current { 
    position: absolute; 

    top: 0; 
    left: 0; 

    height: 100%; 
    width: 100%; 

    z-index: 999; 
}