【你也能从零基础学会网站开发】Web建站之javascript入门篇浏览器之Window对象

原创于 2024-03-12 18:40:48 发布 · 1k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #window对象 #浏览器对象 #弹出框 #免费教程 #web建站 #浏览器与事件

编程开发免费教程专栏收录该内容

82 篇文章

订阅专栏

本文详细介绍了JavaScript中window对象的基础概念、常用属性（如location、history、document等）、方法（如alert、confirm、prompt等）、事件处理（如load、unload、focus等）以及定时器的使用。涵盖了窗口操作、框架结构和状态栏管理等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

🚀 个人主页 极客小俊
✍🏻 作者简介：程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步！
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

概述

在JavaScript中浏览器对象有很多,今天我先介绍window对象以及它的一些属性和方法

大致如下:

window对象
window对象事件及使用方法
对话框
状态栏
窗口操作
超时与时间间隔
框架操作

window对象介绍

简而言之，window对象是浏览器窗口对文档提供一个显示的容器，是每一个加载文档的父对象。window对象还是所有其他对象的顶级对象，通过对window对象的子对象进行操作，可以实现更多的动态效果。

window对象的使用方法

window对象代表当前打开的浏览器窗口，其作为顶级对象。

window对象的方法和属性的调用和其它对象一样，区别是window对象不需要创建即可直使用。

需要注意的是window对象名称是小写，下面是其属性和方法的调用语法:

window.属性名
window.方法名(参数列表)

window对象常见的属性, 如下表

名称	功能说明
document	对象，代表窗口中显示的HTML文档
frames	窗口中框架对象的数组
history	对象，代表浏览过窗口的历史记录
location	对象，代表窗口文件地址，修改属性可以调入新的网页
defaultStatus,status	窗口的状态栏信息
closed	窗口是否关闭，关闭时该值为true
name	窗口名称，用于标识该窗口对象

名称	功能说明
opener	对象，是指打开当前窗口的window对象，如果当前窗口被用户打开，则它的值为null
parent	对象，当前窗口是框架页时指的是包含该框架页的上一级框架窗口
top	对象，当前窗口是框架页时指的是包含该框架页的最外部的框架窗口
self	对象，指当前Window对象

window对象常见的方法, 如下表

名称	功能说明
alert(),confirm,prompt()	弹出简单对话框
close(),open()	关闭、打开窗口
print()	打印窗口中网页的内容
focus(),blur()	请求或放弃窗口为当前操作窗口
moveBy(),moveTo()	移动窗口
resizeBy(),resizeTo()	调整窗口大小
scrollBy(),scrollTo()	滚动窗口中网页的内容
setInterval(),clearInterval()	设置或取消周期执行的定时器
setTimeout(),clearTimeout()	设置或取消一次性执行的定时器

window对象事件及使用方法

装载文档
网页加载完毕时激发一个onload事件。通常在该事件处理程序中进行与网页加载完毕相关的操作，该事件是BODY标签的属性。

该事件也可以作用于IMG元素，通常借助该事件以实现图片预加载功能。
当作用在BODY元素中时，只有当整个网页都加完毕后才会被激发。

卸载文档
与load事件相反，unload事件是在浏览器窗口卸载文档时所激发的事件。

所谓卸载是浏览器的一个功能，即在加载新文档之前，浏览器会清除当前的窗口的内容。
用这个事件可以在卸载文档时给用户一个提示信息

得到焦点与失去焦点事件

得到焦点是指浏览器窗口为当前的活动窗口，得到焦点时触发窗口对象的focus事件。
相反的是当浏览器窗口变为后台窗口时，称为失去焦点。

发生这种转换时触发名为blur的事件。通常将focus事件与blur事件都会联合起来，使用在与窗口活动状态有关的场合。
窗口对象提供两个方法用于调整窗口的大小，分别是resizeTo和resizeBy。

其中， resizeBy是相对于当前尺寸调整窗口大小，而resizeTo是把把窗口设置成指定的宽度和高度。当浏览器窗口大小被调整时，将会触发resize事件。

错误处理

window对象中有一个可以用来处理错误信息的事件error，该事件由浏览器产生。

以IE浏览器为例，一旦产生了JavaScript错误，就会在窗口状态栏中显示错误提示。
只有在当前窗口中发生了JavaScript错误才激发error事件，虽然能得到错误通过，

但与try…catch…finally异常处理结构不同，后者是语言机制，在这种机制下错误是可以挽回的。

window对象常用方法

警告对话框

警告对话框是一个带感叹图标的小窗口，显示文本信息并且使扬声器发出“当～”的声音。

通常用来输出一些简单的文本信息，通过调用window对象的alert方法即可显示一个警告对话框

询问对话框

询问对话框是具有双向交互的信息框，系统在对话框上放置按钮，根据用户的选择返回不同的值。
设计程序时可以根据不同的值予以不同的响应，实现互动的效果。
通常放在网页中，对用户进行询问并根据其选择而做选择不同的流程。

使用语法如下:

window.confirm(string)

对话框的方法分类如下图:

具体如下表:

书写格式	功能说明
alert(str)	提示对话框，显示str字符串的内容按[确定]关闭对话框
confirm(str)	确认对话框，显示str字符串的内容按[确定]按钮返回true，[取消]返回false
prompt(str,value)	输入对话框，采用文本框输入信息按[确定]按钮返回输入值，[取消]关闭

输入对话框
很多情况下需要向网页中的程序输入数据，简单的鼠标交互显然不能满足。

此时就可以使用window对象提供的输入对话框，通过该对话框可以输入数据。
通过window的prompt方法即可显示输入对话框

使用方法如下：

window.prompt( 提示信息，默认值 )

如图

输入对话框实例:

alert("您好！");
confirm("您好吗？");
prompt("您贵姓？","陈");

效果如下图:

返回值比较:

var firstname=prompt("您贵姓？","陈");

if (confirm("您确定？")==true) {

	alert(firstname+"先生，您好！");

}

prompt返回值为输入字符串
confirm返回值为true或false
alert 不返回值

比较老的IE弹出框方法:

书写格式	功能说明
showModalDialog(url,arguments,config)	IE4或更高版本支持该方法
showModelessDialog(url,arguments,config)	IE5或更高版本支持该方法

参数说明:

url 打开链接
arguments 传入参数
config 窗口配置参数

config 外观配置参数
status 状态栏
resizable 可调整大小
help 是否显示标题栏中的    按钮
center 是否显示在桌面正中间
dialogWidth 对话框宽
dialogHeight对话框高
dialogTop 对话框左上角的y坐标
dialogLeft 对话框左上角的x坐标

以上这些配置参数值为yes或no, 值为数字单位为像素!

状态栏

浏览器的状态栏通常位于窗口的底部，用于显示一些任务状态信息等。
在通常情况下，状态显示当前浏览器的工作状态或用户交互提示信息

默认状态栏信息
默认情况下，状态栏里的信息都是空的，只有在加载网页或将鼠标放在超链接上时，状态栏中才会显示与任务目标相关的瞬间信息。

window对象的defaultStatus属性可以用来设置在状态栏中的默认文本，当不显示瞬间信息时，状态栏可以显示这个默认文本。

defaultStatus属性是一个可读写的字符串。

状态栏瞬间信息
在默认情况下，将鼠标放在一个超链接上时，状态栏会显示该超链接的URL，此时的状态栏信息就是瞬间信息。当鼠标离开超链接时，状态栏就会显示默认的状态栏信息，瞬间信息消失。

我们可以通过status属性轻松设置状态栏

书写格式	功能说明
window.status	状态栏中的字符串信息允许进行设置或读取

代码如下

window.status="hello";
var str="您好！今天是"+(new Date()).toLocaleString();
window.status=str;

效果如下

再举个例子

大家可以去运行一下代码看看效果!

window对象中窗口的打开和关闭

打开新窗口
使用window对象的open方法可以打开一个新的浏览器窗口，新窗口作为本窗口的子窗口。
相应的本窗口作为新窗口的次窗口，并持有对新窗口的一个引用，通过该引用可以适度的操作新窗口open方法的语法如下：

window.open(url,name,features,replace)

其中,features是描述窗口的特征, replace指明是否允许url替换窗口的内容。

窗口名字

窗口的名字在窗口打开时可以设定，仍然用open方法，只是充分运用它的参数的设置。
window.open方法可以设置新开窗口的名称，该窗口名称在a元素和form元素的target属性中使用。

如下表

书写格式	功能说明
window.open(url,name,config)	打开新窗口 url为打开的超链接 name为窗口的名称 config为窗口的配置参数返回新窗口对象
window.close()	关闭窗口

注意: config 参数具体元素

menubar 菜单条
toolbar 工具条 
location 地址栏
directories 链接
status 状态栏
scrollbars 滚动条
resizeable 可调整大小
width 窗口宽，以像素为单位
height 窗口高，以像素为单位

窗口的操作

关闭窗口

如果获得一个window对象的引用时，通过该引用去调用其close方法就可以关掉一个与之相关的窗口。通常情况下，父窗口通过这种方式关闭子窗口。
语法如： 窗口名.close()

窗口的引用

上文已经提到通过窗口的引用可以操作内容，同时可以操作窗口的内容。
使用些特性可以在一个窗口中控制另一个窗口的内容，
例如: 向一个新开的浏览器窗口中输出内容。

滚动文档
浏览器中的内容大于其显示区域时，一般会出现滚动条便于查看被遮内容。
用户可以拖动滚动条，也可以通过程序来控制窗口的滚动。
调用window对象的scrollBy或scrollTo方法即可滚动文档。

举个栗子,代码如下

大家可以去运行一下代码看看!

window对象中的定时器

定时器可以用来干嘛呢？基本上可以实现以下的需求:

网页动态时钟
制作倒计时
跑马灯效果
幻灯片效果
自动滚屏阅读
制作网页小游戏
……

也就是说其实网页动画的实现，很多都是用的定时器!

基本语法格式:

书写格式	功能说明
tID=setInterval(exp,time)	周期性触发执行代码exp exp为字符串格式的执行语句 time为时间周期，单位为毫秒返回已经启动的定时器
clearInterval(tID)	停止启动的定时器
tID=setTimeout(exp,time)	一次性触发执行代码exp exp为字符串格式的执行语句 time为间隔时间，单位为毫秒返回已经启动的定时器
clearTimeout(tID)	停止启动的定时器

其他window对象方法

内容滚动

书写格式	功能说明
window.scroll(x,y)	滚动窗口到指定位置单位为像素
window.scrollTo(x,y)	同scroll方法
window.scrollBy(ax,ay)	从当前位置开始，向右滚动ax像素，向下滚动ay像素

调整窗口大小和位置

书写格式	功能说明
window.moveTo(x,y)	移动窗口到指定位置单位为像素
window.moveBy(ax,ay)	向右移动ax像素向下移动ay像素参数为负数表示反方向移动
window.resizeTo(width,height)	调整窗口大小为指定大小
window.resizeBy(ax,ay)	放大或缩小窗口参数为负数表示缩小