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

看看这不是一种跨浏览器的方式，但你可以做的是，设置一个新的更大的iframe高度来最大化。为了最小化，你将不得不在其中使用display：none，并创建一个形状像条形的div和附加到它上面的onclick事件，当它被单击时，隐藏自己并将display：static / block设置为你的IFrame。 / p>

$（ “＃iframe_div”）隐藏（）;在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>

如何最大化/最小化iFrame？

4 个答案: