iFrame을 최대화/최소화하려면 어떻게합니까?

Question

2 개의 iFrames가있는 페이지가 있습니다. 두 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(); 
}); 

iframe에는 외부 DOM 요소를 조작 할 수있는 권한이 없으므로 상위 DOM이 수행해야합니다.

Answer 3

theres는 크로스 브라우저를 수행하는 방법이 아니지만, 할 수있는 일은 Iframe의 새로운 높이를 최대로 설정하는 것입니다. 최소화하려면 display : none을 사용하고 막대 모양의 div 및 onclick 이벤트를 클릭하여 숨기고 display : static/block을 IFrame에 설정해야합니다.

$ ("# iframe_div"). hide(); iframe 옆의 최소화 버튼 및 $ (this) .remove(); $ ("# iframe_div"). show(); bar 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>