如何最大化/最小化iFrame？

Question

我有一個有2個iFrame的頁面。我想添加一個按鈕來最大化或最小化兩個iframe。該按鈕應位於每個iframe上。我使用jQuery，但不知道如何去做這件事。

Answer 1

如果這是正確的身上，你可以擴展它來搭配父：

$('resizeBtn').click(function(){ 
    $('#iframe1').css('position','absolute').animate({ 
     height: $(this).parent().height() + 'px', 
     width: $(this).parent().width() + 'px' 
    },500); 
}); 

Answer 2

像這樣的東西會切換iframe的不可見性。

$('#button-id').click(function() { 
    $('#iframe-id').toggle(); 
}); 

這必須由父DOM完成，因爲iframe沒有權限操作其自身以外的元素。

Answer 3

看看theres不是做跨瀏覽器的方法，但是你可以做什麼，是設置一個新的更大的Iframe最大高度。 爲了最小化，您必須使用display：none，並創建一個形狀像條形的div和一個onclick事件，當它被點擊時，隱藏自身並將display：static/block設置爲您的IFrame。

$（「＃iframe_div」）。hide（）;在iframe 旁邊的最小化按鈕和$（this）.remove（）; $（ 「＃iframe_div」）顯示（）。在酒吧div最大化。

Answer 4

**//here is the script** 

    <script src="Scripts/Jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    jQuery(function ($) { 
     $('#min1').click(function() { 
      var iframeheight = $('#iframe1').width(); 
      if (iframeheight == 934) { 
       $('#iframe1').width(462); 
       document.getElementById('divFrame2').style.display = "block"; 
      } 
     }); 
     $('#max1').click(function() { 
      var iframeheight = $('#iframe1').width(); 
      if (iframeheight == 462) { 
       $('#iframe1').width(934); 
       document.getElementById('divFrame2').style.display = "none"; 
      } 
     }); 
     $('#min2').click(function() { 
      var iframeheight = $('#iframe2').width(); 
      if (iframeheight == 934) { 
       $('#iframe2').width(462); 
       document.getElementById('divFrame1').style.display = "block"; 
      } 
     }); 
     $('#max2').click(function() { 
      var iframeheight = $('#iframe2').width(); 
      if (iframeheight == 462) { 
       $('#iframe2').width(934); 
       document.getElementById('divFrame1').style.display = "none"; 
      } 
     }); 
    }); 
    </script> 

    **//style** 
    <style type="text/css"> 
    .bdr 
    { 
     border: 1px solid #6593cf; 
    } 
    </style> 

    **//aspx sample** 
    <form id="form1" runat="server"> 
    <table><tr><td > 
    <div id="divFrame1" class="bdr"> 
     <div> 
      <img id="min1" src="Images/Minimize.jpg" width="13" height="14" border="0" alt="" /> 
      <img id="max1" src="Images/Maximize.jpg" name="Image6" width="13" height="14" border="0" 
       id="Image6" alt="" /> 
     </div> 
     <iframe name="content" id="iframe1" src="http://www.dynamicdrive.com/forums/archive/index.php/t-2529.html" 
      frameborder="0" height="321" width="462"></iframe> 
     </div> 
    </td ><td > 
    <div id="divFrame2" class="bdr"> 
     <div> 
      <img id="min2" src="Images/Minimize.jpg" width="13" height="14" border="0" alt="" /> 
      <img id="max2" src="Images/Maximize.jpg" name="Image6" width="13" height="14" border="0" 
       id="Image7" alt=""> 
     </div> 
     <iframe name="content" id="iframe2" src="http://www.w3schools.com/default.asp" frameborder="0" 
      height="321" width="462"></iframe> 
    </div> 
    </td></tr></table> 
    </form>