改变浏览器窗口的大小和位置-技术开发专区

改变浏览器窗口的大小和位置

作者：ITPUB论坛编辑： nancy 2008-06-27 00:00

【IT168技术文档】

问题一：
希望改变当前页面所在的浏览器窗口的大小
解决方案：
使用window对象的方法：resizeTo()和resizeBy()。比如:

    window.resizeTo(800, 600); // 将窗口大小调整为宽800，高600，单位为像素
    window.resizeBy(50, 50);   // 调整窗口大小，在当前基础上，宽和高各增加50
    window.resizeBy(50, 0);   // 调整窗口大小，在当前基础上，只将宽增加50
    window.resizeBy(-50, -50); // 调整窗口大小，在当前基础上，宽和高各减少50

问题二：
上面提到了，resizeTo()和resizeBy()方法不能改变窗口左上角的位置，但有时的确有这种需求，比如最大化窗口。
解决方案：
使用moveTo()方法将浏览器窗口移动到屏幕的指定坐标位置：

moveTo(100, 100); // 将左上角移至(100, 100)点
    使用moveBy()方法将浏览器窗口在当前位置基础上移动一个相对偏移量：
moveBy(50, 50); // 将窗口向右和向下各移动50个像素
    两个函数的定义为：
window.moveTo(x, y); // x, y 为新位置的两个坐标值
    window.moveBy(dx, dy); // dx, dy 是相对偏移的值

现在能够改变窗口的大小，也能改变窗口的位置了，如果两者结合起来就能做更多事情，比如最大化窗口。看下面这个函数：

    function maximizeWindow()
{
var offset = (navigator.userAgent.indexOf("Mac") != -1 || navigator.userAgent.indexOf("Gecko") != -1 ||
navigator.appName.indexOf("Netscape") != -1) ? 0 : 4;
window.moveTo(-offset, -offset);
window.resizeTo(screen.availWidth + (2 * offset), screen.availHeight + (2 * offset));
}

该函数能让窗口占据整个屏幕，看起来确实是最大化了，事实却不是这样，不信请查看窗口的最大化按钮。脚本首先为Windows设置了一个额外的偏移量4 (原因看后面)，然后再调整窗口的位置和大小，模拟一种最大化的效果。其中screen对象的availWidth和availHeight属性分别表示屏幕的可用宽度和高度(单位为像素)，注意它们不包括任务栏的尺寸。
最大化和最小化的概念主要出现在Windows操作系统中，与Macintosh中的窗口就不一样(下次去电脑城，得仔细体验一下有何不同)。也许我们能够模拟一个最大化窗口，但对于不同的浏览器总有些局限性。首先，在Windows中一个真正最大化的窗口左上角的坐标是(-4, -4)而不是(0, 0)，这样能将4像素宽的窗口边沿隐藏掉，这也是上面脚本中出现4的原因，而Macintosh则允许窗口细长的边沿总是可见；另外还与浏览器有关系，比如FireFox根本就不允许将窗口移至(-4, -4)这个点。
仅仅通过脚本不能使窗口真正地最大化或最小化。但试试下面这段脚本(只在IE下有效)，也许会给你一点惊喜:)

<OBJECT id="min" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM name="Command" value="Minimize">
</OBJECT>
<button onclick="min.Click()"><font face="webdings">0</font></button>
<OBJECT id="max" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM name="Command" value="Maximize">
</OBJECT>
<button onclick="max.Click()"><font face="webdings">1</font></button>
<OBJECT id="clo" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM name="Command" value="Close">
</OBJECT>
<button onclick="clo.Click()"><font face="webdings">r</font></button>

关注我们