本文详细介绍JavaScript中的Window窗口对象,涵盖其核心属性如name、status、opener等,以及open、close、alert等常用方法。同时解析onload、onerror等关键事件,帮助开发者掌握浏览器窗口控制与页面交互技巧。
Window对象概述
JavaScript中的Window窗口对象
作为JavaScript中最大的内置对象,Window代表了一个浏览器窗口。在大多数情况下,引用其属性和方法时无需显式使用“window.xxx”前缀,直接调用“xxx”即可。此外,框架页面(iframe)本身也被视为一个独立的窗口对象。
Window对象属性
Window窗口对象包含以下主要属性:
name:表示窗口的名称。该名称由打开它的链接(如<a target="...">)、框架页(<frame name="...">)或调用open()方法时指定的名称决定。通常情况下,开发者较少直接操作此属性。
status:用于设置或获取窗口状态栏显示的文字内容。通过给status赋值,可以动态改变状态栏的提示信息。
opener:通过window.opener访问,返回打开当前窗口的父窗口对象。需要注意的是,如果当前窗口不是由其他窗口打开的,在Netscape浏览器中该属性返回null,而在IE浏览器中返回undefined。虽然undefined在数值比较中等同于null,但它并非JavaScript的常量。若代码中直接使用undefined标识符,可能会引发未定义错误。
self:指向当前窗口本身,其返回的对象与window对象完全一致。最常用的场景是配合<a>标签实现关闭功能,例如:<a href="javascript:self.close()">关闭窗口</a>。
parent:返回当前窗口所属的父级框架页对象。如果当前窗口不在框架中,parent通常指向self。
top:返回占据整个浏览器窗口最顶层的框架页对象。在嵌套框架结构中,top始终指向最外层的窗口。
history:历史对象,用于管理浏览历史记录,具体用法见后续章节。
location:地址对象,用于获取或设置当前窗口的URL地址,具体用法见后续章节。
document:文档对象,代表当前窗口加载的HTML文档,具体用法见后续章节。
Window对象方法
Window窗口对象还提供以下常用方法:
open():用于打开一个新的浏览器窗口或标签页。
用法示例如下:
open(<URL字符串>, <窗口名称字符串>, <参数字符串>);
参数说明:
<URL字符串>:指定新窗口要加载的网页地址。若留空(''),则新窗口初始为空白页。
<窗口名称字符串>:指定新窗口的名称(对应window.name)。可以使用预定义名称如'_top'、'_blank'等。该名称的作用类似于HTML中<a>标签的target属性。
<参数字符串>:用于定义新窗口的显示样式。若只需打开普通窗口,可留空('');若需定制窗口外观,可在字符串中指定多个参数,参数间以逗号分隔。
示例:打开一个尺寸为400x100像素、无菜单栏和工具栏的干净窗口:
open('','_blank','width=400,height=100,menubar=no,toolbar=no,
location=no,directories=no,status=no, scrollbars=yes,resizable=yes')
open()方法的详细参数列表:
top=#:窗口顶部距离屏幕顶部的像素数。
left=#:窗口左端距离屏幕左端的像素数。
width=#:窗口的宽度(像素)。
height=#:窗口的高度(像素)。
menubar=...:是否显示菜单栏,取值为yes或no。
toolbar=...:是否显示工具栏,取值为yes或no。
location=...:是否显示地址栏,取值为yes或no。
directories=...:是否显示连接区(如书签栏),取值为yes或no。
scrollbars=...:是否显示滚动条,取值为yes或no。
status=...:是否显示状态栏,取值为yes或no。
resizable=...:是否允许用户调整窗口大小,取值为yes或no。
注意:open()方法会返回一个指向新打开窗口的对象引用。例如:
var newWindow = open('','_blank');
将新窗口对象赋值给变量newWindow后,即可通过该变量对新窗口进行后续控制,如关闭或修改内容。
close():用于关闭一个已打开的窗口。
用法示例:
window.close()
或者
self.close()
主要用于关闭当前窗口。
<窗口对象>.close():用于关闭指定的窗口。如果该窗口包含状态栏,调用此方法时浏览器会弹出确认对话框:“网页正在试图关闭窗口,是否关闭?”,等待用户确认;若窗口无状态栏,则直接关闭。
此外,Window窗口对象还提供以下辅助方法:
blur():使当前窗口失去焦点,变为非活动状态。
focus():使当前窗口获得焦点,变为活动状态。在Windows 98等旧系统中,该方法可能仅使窗口标题栏和任务栏按钮闪烁以提示用户。
scrollTo():用法为[<窗口对象>.]scrollTo(x, y),使文档滚动,将距离文档左上角(x, y)像素的点移动到窗口左上角。
scrollBy():用法为[<窗口对象>.]scrollBy(deltaX, deltaY),使窗口向右滚动deltaX像素,向下滚动deltaY像素。若参数为负值,则向相反方向滚动。
resizeTo():用法为[<窗口对象>.]resizeTo(width, height),将窗口调整至指定的宽width和高height像素。
resizeBy():用法为[<窗口对象>.]resizeBy(deltaWidth, deltaHeight),使窗口宽度增加deltaWidth像素,高度增加deltaHeight像素。若参数为负值,则减小窗口尺寸。
alert():用法为alert(<字符串>),弹出一个仅包含“确定”按钮的提示对话框,显示指定字符串内容。在用户点击“确定”前,整个文档的加载和脚本执行都会暂停。
confirm():用法为confirm(<字符串>),弹出一个包含“确定”和“取消”按钮的对话框,显示指定字符串内容并要求用户选择。在用户操作前,文档加载和脚本执行暂停。若用户点击“确定”,返回true;若点击“取消”,返回false。
prompt():用法为prompt(<字符串>[, <初始值>]),弹出一个包含“确认”、“取消”按钮及文本输入框的对话框,显示指定字符串内容。在用户操作前,文档加载和脚本执行暂停。若用户点击“确认”,返回文本框内容;若点击“取消”,返回null。若提供了<初始值>,文本框将显示该默认值。
Window对象事件
Window窗口对象还包含以下事件:
window.onload:在文档及其所有依赖资源(包括HTML、图片、插件、控件、小程序等)全部下载完毕后触发。虽然这是window对象的事件,但在HTML中通常将其处理程序绑定在<body>标签上。
window.onunload:在用户离开当前文档(如关闭窗口或导航至其他页面)时触发。与onload类似,在HTML中通常绑定在<body>标签内。
window.onresize:在窗口大小被调整时触发。
window.onblur:在窗口失去焦点时触发。
window.onfocus:在窗口获得焦点时触发。
window.onerror:在发生脚本错误时触发。其事件处理程序通常称为“错误处理程序”(Error Handler),用于捕获和处理错误。若要忽略所有错误,可设置如下代码:
function ignoreError() {
return true;
}
window.onerror = ignoreError;