如何切換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"/> 

這ofcourse需要爲您的填充和保證金包含頁面設置爲0至極情況下，你需要從iframe內的切換，通話parent.toggleFullScreen()我想。

希望這是你在找什麼！

P.S 榮譽給James Padolsey爲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>