改变浏览器窗口的大小和位置
问题一:
希望改变当前页面所在的浏览器窗口的大小
解决方案:
使用window对象的方法:resizeTo()和resizeBy()。比如:
window.resizeTo(800, 600); // 将窗口大小调整为宽800,高600,单位为像素
window.resizeBy(50, 50); // 调整窗口大小,在当前基础上,宽和高各增加50
window.resizeBy(50, 0); // 调整窗口大小,在当前基础上,只将宽增加50
window.resizeBy(-50, -50); // 调整窗口大小,在当前基础上,宽和高各减少50
讨论:
两个函数的定义为:
window.resizeTo(width, height)
width和height分别为窗口期望的宽度和高度,单位为像素,出于安全因素考虑,两参数都不能小于100。
window.resizeBy(dw, dh)
dw为期望窗口增加的宽度值,dh为期望窗口增加的高度值,如果值为负数,则将减小窗口的大小,两参数单位均为像素。同样出于安全因素考虑,该方法至多将窗口减小为100 * 100。
通过这两个方法调整大小的时候,窗口的左上角总是固定的,它只会改变右边和底端边沿的位置。
注意: 两个方法都对模式对话框无效。
建议: 尽量不要尝试为用户定制浏览器大小,很多用户对浏览器都有自己的设置,尤其是那些对浏览器使用有经验的人,如果你为其调整了窗口大小,而用户并不喜欢,那么他每次都要去将浏览器调整为自己喜欢的大小,他一定会对你的网页颇有微词。
问题二:
上面提到了,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 是相对偏移的值
讨论:
屏幕的区域位置用坐标来表示,左上角定为(0, 0),所以屏幕的可见区域坐标值都是整数,而坐标值为负数或大于屏幕像素数的点可以认为是在屏幕之外(off the screen)。事实上,在调用这两个函数时,IE会严格按照参数值的指示来设定窗口的位置,也就是说,如果坐标值特别小或特别大,会导致整个窗口都不可见;而FireFox则拒绝这么做,它会确保整个窗口总是在可见范围内。让整个窗口都不可见是种不友好的行为,特别是在Windows中,此时用户在任务栏中看到有窗口打开,在屏幕上却找不到!只能通过右键菜单来最大化窗口或直接关闭窗口了。
提示:我们可以通过脚本打开新的浏览器窗口,并获得对这些窗口的引用,这意味着我们可以通过脚本来改变这些新窗口的大小和位置。
现在能够改变窗口的大小,也能改变窗口的位置了,如果两者结合起来就能做更多事情,比如最大化窗口。看下面这个函数:
该函数能让窗口占据整个屏幕,看起来确实是最大化了,事实却不是这样,不信请查看窗口的最大化按钮。脚本首先为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>
参考:
JavaScript And Dhtml Cookbook(Oreilly) ;
JavaScript-The Definitive Guide(4th Edition);
问题一:
希望改变当前页面所在的浏览器窗口的大小
解决方案:
使用window对象的方法:resizeTo()和resizeBy()。比如:
window.resizeTo(800, 600); // 将窗口大小调整为宽800,高600,单位为像素
window.resizeBy(50, 50); // 调整窗口大小,在当前基础上,宽和高各增加50
window.resizeBy(50, 0); // 调整窗口大小,在当前基础上,只将宽增加50
window.resizeBy(-50, -50); // 调整窗口大小,在当前基础上,宽和高各减少50
讨论:
两个函数的定义为:
window.resizeTo(width, height)
width和height分别为窗口期望的宽度和高度,单位为像素,出于安全因素考虑,两参数都不能小于100。
window.resizeBy(dw, dh)
dw为期望窗口增加的宽度值,dh为期望窗口增加的高度值,如果值为负数,则将减小窗口的大小,两参数单位均为像素。同样出于安全因素考虑,该方法至多将窗口减小为100 * 100。
通过这两个方法调整大小的时候,窗口的左上角总是固定的,它只会改变右边和底端边沿的位置。
注意: 两个方法都对模式对话框无效。
建议: 尽量不要尝试为用户定制浏览器大小,很多用户对浏览器都有自己的设置,尤其是那些对浏览器使用有经验的人,如果你为其调整了窗口大小,而用户并不喜欢,那么他每次都要去将浏览器调整为自己喜欢的大小,他一定会对你的网页颇有微词。
问题二:
上面提到了,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 是相对偏移的值
讨论:
屏幕的区域位置用坐标来表示,左上角定为(0, 0),所以屏幕的可见区域坐标值都是整数,而坐标值为负数或大于屏幕像素数的点可以认为是在屏幕之外(off the screen)。事实上,在调用这两个函数时,IE会严格按照参数值的指示来设定窗口的位置,也就是说,如果坐标值特别小或特别大,会导致整个窗口都不可见;而FireFox则拒绝这么做,它会确保整个窗口总是在可见范围内。让整个窗口都不可见是种不友好的行为,特别是在Windows中,此时用户在任务栏中看到有窗口打开,在屏幕上却找不到!只能通过右键菜单来最大化窗口或直接关闭窗口了。
提示:我们可以通过脚本打开新的浏览器窗口,并获得对这些窗口的引用,这意味着我们可以通过脚本来改变这些新窗口的大小和位置。
现在能够改变窗口的大小,也能改变窗口的位置了,如果两者结合起来就能做更多事情,比如最大化窗口。看下面这个函数:
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));
}
{
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>
参考:
JavaScript And Dhtml Cookbook(Oreilly) ;
JavaScript-The Definitive Guide(4th Edition);
本文转自一个程序员的自省博客园博客,原文链接:http://www.cnblogs.com/anderslly/archive/2006/11/15/javascriptwindow1.html,如需转载请自行联系原作者。