JavaScript 定位窗口到指定位置

通过Screen 对象的属性获得屏幕的相关信息后,结合Window 对象有关窗口移动、更改尺寸的属性,可准确定位目标窗口。

实际应用中如跟随鼠标移动的窗口、拥有固定位置的窗口等。

考察如下控制窗口位置的代码:[code]

Sample Page!

顺序单击如下按钮,实现窗口准确定位






[/code]程序主要分为如下几个步骤:

在页面中单击“初始化浏览器窗口”按钮,按照InitWindow()函数设定的参数值初始化目标窗口。

通过Window 对象的moveTo()方法将窗口移动到(200,200)位置,并通过其resizeTo()方法改变目标窗口大小为480*320,单位均为像素值;

单击“将浏览器窗口居中”按钮,JavaScript 脚本通过Screen 对象的width 和height 属性及窗口的宽度和高度计算窗口居中时其左上顶点的坐标,通过Window 对象的moveTo()方法将目标窗口居中;

单击“开始目标窗口移动”按钮,触发 StartMove()函数启动间隔时间计时器,该计时器连接到函数MoveWindow(),后者计算目标窗口的当前位置设定移动的方向和下一个位置,并通过Window 对象的moveTo()方法更新目标窗口的位置。

此过程在间隔时间计时器的控制下循环进行,实现窗口的移动;

单击“停止目标窗口移动”按钮,取消控制窗口移动的间隔时间计时器,并通过CenterWindow()函数将窗口居中放置;

单击“全屏化浏览器窗口”按钮,触发FullWindow()函数,后者通过检查客户端浏览器的类型,并调用其支持的属性,通过Window 对象的moveTo()和resizeTo()方
法将目标窗口最大化。

上述代码演示了如何精确控制指定窗口的位置,在窗口移动过程中,可通过缩短间隔计时器时间并减小像素的每次偏移xDirection 和yDirection 的初始值来达到使目标窗口移动流畅的目的。