Как я могу максимизировать / минимизировать iFrame? - PullRequest
Новая
       2

Как я могу максимизировать / минимизировать iFrame?

1 голос
/ 26 сентября 2011

У меня есть страница с 2 кадрами.Я хочу добавить кнопку, которая максимизирует или минимизирует оба фрейма.Эта кнопка должна быть на каждом фрейме.Я использую jQuery, но не знаю, как это сделать.

Ответы [ 4 ]

2 голосов
/ 26 сентября 2011

Если это правильно в теле, вы можете масштабировать его в соответствии с родителем: 

$('resizeBtn').click(function(){
    $('#iframe1').css('position','absolute').animate({
        height: $(this).parent().height() + 'px',
        width:  $(this).parent().width()  + 'px'
    },500);
});
0 голосов
/ 04 мая 2012 
  **//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>
0 голосов
/ 26 сентября 2011

Посмотрите, не способ сделать это кросс-браузер, но что вы можете сделать, это установить новую большую высоту Iframe, чтобы максимизировать. Чтобы свести к минимуму, вам придется использовать display: none в нем, и создать div в форме столбца и прикрепленного к нему события onclick, чтобы при его нажатии скрыться и установить display: static / block для вашего IFrame.

$ ( "# iframe_div") скрыть (). в кнопке свертывания рядом с вашим iframe и $ (this) .remove (); $ ( "# Iframe_div") шоу (). в баре div чтобы развернуть.

0 голосов
/ 26 сентября 2011

Примерно так будет переключаться невидимость iframe.

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

Это должно быть сделано родительским DOM, поскольку у iframe нет разрешения на манипулирование элементами вне себя.

...