如何在JavaScript中切換iframe以最大化或最小化？

Question

我在這里使用Prototype，並希望構建一個簡單的切換器，該切換器可切換一個iframe，該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() 。

希望這是您想要的！

PS對James Padolsey的getDocHeight()函數表示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>