2011-09-26 255 views
1

我有一个有2个iFrame的页面。我想添加一个按钮来最大化或最小化两个iframe。该按钮应位于每个iframe上。我使用jQuery,但不知道如何去做这件事。如何最大化/最小化iFrame?

+0

如何是关系到jQuery Mobile的框架?你在使用它吗? [如果是,请考虑不要在移动设备上使用iframe] – naugtur

回答

2

如果这是正确的身上,你可以扩展它来搭配父:

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

像这样的东西会切换iframe的不可见性。

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

这必须由父DOM完成,因为iframe没有权限操作其自身以外的元素。

0

看看theres不是做跨浏览器的方法,但是你可以做什么,是设置一个新的更大的Iframe最大高度。 为了最小化,您必须使用display:none,并创建一个形状像条形的div和一个onclick事件,当它被点击时,隐藏自身并将display:static/block设置为您的IFrame。

$(“#iframe_div”)。hide();在iframe 旁边的最小化按钮和$(this).remove(); $( “#iframe_div”)显示()。在酒吧div最大化。

0
**//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>