Question

我在这里使用Prototype并且想要构建一个简单的切换器，切换包含切换器所在页面的iframe，以最大化浏览器的全尺寸或最小化到其原始大小。有什么想法吗？

Answer 1

这适用于我在IE7＆amp; 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()函数

的James Padolsey感到荣幸

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>

如何在javascript中切换iframe以最大化或最小化？

2 个答案: