Как мне переключить iframe, чтобы максимизировать или минимизировать в JavaScript?

Question

Я использую здесь Prototype и хотел бы создать простой переключатель, который переключает фрейм iframe, содержащий страницу, на которой находится переключатель, чтобы максимизировать до полноразмерных браузеров или свернуть до исходного размера. Есть идеи?

Answer 1

Это работает для меня в IE7 и FF3.6 (доступно только на работе).

function getDocWidth() {
    var D = document;
    return Math.max(
    Math.max(D.body.scrollWidth, D.documentElement.scrollWidth),
    Math.max(D.body.offsetWidth, D.documentElement.offsetWidth),
    Math.max(D.body.clientWidth, D.documentElement.clientWidth)
    );
}
function getDocHeight() {
    var D = document;
    return Math.max(
    Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
    Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
    Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}

var isFullScreen = false;
var orgDimensions = new Array();

function toggleFullScreen() {
    ifr = document.getElementById("iFrameWin");
    if (!isFullScreen) {
        orgDimensions[0] = ifr.style.width;
        orgDimensions[1] = ifr.style.height;
        ifr.style.width = getDocWidth() + "px";
        ifr.style.height = getDocHeight() + "px";
    }
    else {
        ifr.style.width = orgDimensions[0];
        ifr.style.height = orgDimensions[1];
    }
    isFullScreen = !isFullScreen;
}

Где находится iframe:

<iframe id="iFrameWin" src="http://www.google.se" width="400" height="300"/>

Этот курс требует от вас установки отступа и поля для содержащей страницы на 0, в случае, если вам нужно будет переключаться изнутри iframe, вызывая parent.toggleFullScreen() Я думаю.

Надеюсь, это было то, что вы искали!

P.S слава Джеймсу Падолси за getDocHeight() функцию

Answer 2

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