本文详细解析JavaScript中Window对象的核心功能,涵盖窗口移动与大小调整方法、open新窗口的参数配置及特性字符串、系统对话框与状态栏控制,以及setTimeout定时器和历史记录的导航操作,帮助开发者掌握浏览器窗口的高级交互技巧。
Window对象
window对象代表了整个浏览器窗口,开发者可以利用它来移动窗口位置或调整窗口的大小。
一、窗口操作
window.moveBy(dx,dy)
该方法用于将浏览器窗口相对于当前位置进行移动,水平方向移动dx个像素,垂直方向移动dy个像素。当dx为负数时,窗口向左移动;当dy为负数时,窗口向上移动。
window.moveTo(x,y)
此方法用于移动浏览器窗口,使其左上角定位到屏幕坐标(x,y)处。虽然可以使用负数坐标,但这会导致窗口部分区域移出屏幕可视范围。
window.resizeBy(dw,dh)
该方法用于调整浏览器窗口的当前大小,宽度调整dw个像素,高度调整dy个像素。若dw为负数,则缩小窗口宽度;若dy为负数,则缩小窗口高度。
window.resizeTo(w,h)
此方法将窗口宽度直接设置为w,高度设置为h。注意,参数不能使用负数。关于窗口在屏幕上的位置及尺寸控制,由于缺乏统一标准,不同浏览器实现可能存在差异。
二、导航和打开新窗口
window.open()方法打开新窗口
该方法接收四个参数:①指定载入新窗口的URL;②新窗口的名称(用于目标引用);③特性字符串;④布尔值,指示是否用新页面替换当前历史记录中的页面。
第三个参数特性字符串的设置列表:
|
设置 |
值 |
说明 |
|
left |
Number |
新创建的窗口的左坐标,不能为负数* |
|
top |
Number |
说明新创建的窗口的上坐标。不能为负数* |
|
height |
Number |
设置新创建的窗口的高度。该数字不能小于100* |
|
width |
Number |
设置新创建的窗口的宽度。该数字不能小于100* |
|
resizable |
yes,no |
判断新窗口能否拖动边线调整大小,默认值是no |
|
scrollable |
yes,no |
判断新窗口是否允许滚动,默认值是no |
|
toolbar |
yes,no |
判断新窗口是否显示工具栏,默认值是no |
|
status |
yes,no |
判断新窗口是否显示状态栏,默认值是no |
|
location |
yes,no |
判断新窗口是否显示地址栏,默认值是no |
注意:特性字符串中的各项设置以逗号分隔,因此在逗号或等号前后不能包含空格。
window.open()方法返回一个window对象作为函数值,该对象代表新创建的窗口(如果提供的名字对应现有框架,则返回该框架)。通过返回的对象,可以操作新创建的窗口。
三、系统对话框
这部分内容较为常见,主要包括alert()、confirm()和prompt()方法。
四、状态栏
状态栏用于向用户提示页面加载状态,可以通过window对象的两个属性进行控制:status和defaultStatus。
defaultStatus用于定义浏览器状态栏的默认显示内容。当鼠标悬停在链接上时,状态栏文字会随之改变;鼠标移出链接后,文字恢复为defaultStatus定义的值。这与status属性不同,后者仅用于临时改变状态栏内容。
五、时间间隔和暂停
setTimeout()接收两个参数:第一个参数可以是代码字符串或函数指针,第二个参数指定执行前等待的毫秒数(1/1000秒)。
若要取消暂停,可调用clearTimeout()方法,该方法接收一个参数“数字暂停ID”,该ID由setTimeout()创建。setTimeout()返回的是一个数字暂停ID,类似于操作系统中的进程ID,本质上代表延迟进程的标识。
六、历史
go()方法仅有一个参数,即前进或后退的页面数。若参数为负数,则在浏览器历史中后退;若为整数,则前进。
window.history.go(-1); //后退一页
window.history.go(1); //前进一页
或者
history.go(-1); //window对象的引用不是必需的
使用back()方法和forward()方法可以实现相同的效果:
history.back(); //后退一页
history.forward(); //前进一页
利用length属性可以查看历史中的页面数量:
alert(history.length);
如果需要前进或后退多个页面,可以先使用length属性检查是否可行。