[英]How do I toggle an iframe to maximize or minimize in javascript?
I'm using Prototype here and would like to build a simple toggler that toggles an iframe which contains the page the toggler is on to maximize to the browsers full size or minimize to its original size. 我在这里使用Prototype,并希望构建一个简单的切换器,该切换器可切换一个iframe,该iframe包含切换器所处的页面,以最大化浏览器的完整尺寸或最小化其原始尺寸。 Any ideas? 有任何想法吗?
This works for me in IE7 & FF3.6 (only available at work). 这在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;
}
Where th iframe is: iframe在哪里:
<iframe id="iFrameWin" src="http://www.google.se" width="400" height="300"/>
This ofcourse needs for you to set the padding and margin to the containing page to 0 in wich case you would need to toggle from inside the iframe, calling parent.toggleFullScreen()
I think. 当然,这需要您将包含页面的填充和边距设置为0,以防万一,您需要从iframe内部进行切换,我想调用parent.toggleFullScreen()
。
Hope it was what you were looking for! 希望这是您想要的!
PS kudos to James Padolsey for the getDocHeight()
function PS对James Padolsey的getDocHeight()
函数表示getDocHeight()
**//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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.