html5页面加载对象,JavaScript浏览器对象-window对象

窗口是JavaScript浏览器对象模型中的顶层对象，称为window对象，它代表了打开的浏览器窗口，这是一个全局对象。

窗口也可以划分为几个独立的显示区域，每一个区域显示相对独立的内容，这样的区域称为框架，它实际上是窗口中的窗口。关于框架将会在后面进行介绍。

window对象的属性和方法

窗口对象是所有其他对象的基础，它有一组属性和方法，用于控制窗口的特征和行为。由于窗口对象十分复杂，又是其他对象的父对象，因此，在使用窗口对象的属性和方法时，JavaScript允许省略窗口对象的名称。例如，使用窗口对象的alert()方法来显示一个弹出的消息框时，标准的写法应该是：window.alert("message")，但是JavaScript允许使用简略的写法：alert("message")。

窗口对象提供了一组丰富的属性和方法，其中某些属性本身又是对象，这是面向对象编程的一个特点。下表中列出了window对象的常用属性。

属性

描述

closed

指明窗口是否已经被关闭，只读属性，true表示已关闭,false表示未关闭

defaultStatus

指定浏览器下方状态栏中显示的默认信息。只要状态栏中没有显示其他消息，就显示该属性指定的信息

document

只读属性，为当前窗口或框架包含的Document对象的引用

frames[]

记录窗口中包含的框架，每一个框架都是一个window对象，框架本身可以嵌套

history

指向history对象的引用，只读属性

length

窗口中包含的框架个数

location

用于本窗口的location对象。该属性的行为比较特殊，如果将一个URL复制给该属性，那么浏览器就加载并显示该URL指定的文档

name

窗口的名称，窗口的名称可以通过window.open()方法指定，也可以在标记中使用name属性指定

navigator

执行navigator对象的引用，只读属性。通过navigator对象，程序可以了解浏览器的基本信息

opener

指向打开本窗口的窗口的引用

parent

一个只读引用，指向包含本窗口或框架的窗口。如果本窗口为顶层窗口，那么该属性指向自己

screen

指向screen对象的引用，只读属性

self

指向窗口本身的引用，与window属性的意义完全相同

status

指定浏览器状态栏中显示的临时信息

top

一个只读引用，指向包含本窗口的最顶层窗口，如果本窗口就是最顶层窗口，那么该属性指向自己

window

当前窗口，与self属性意义相同

clientInformation

该属性只用于IE浏览器，是navigator属性的别名

event

该属性只用于IE浏览器，指向Event对象，Event对象包含了最近发生事件的细节。在IE对象模型中，Event对象没有作为事件处理程序的参数传递，而是赋值给了event属性

innerHeight,innerWidth

只适用于Netscape 4+，指定窗口总的高度、宽度，以像素为单位。该区域包括菜单栏、工具栏、滚动条和窗口边框

outerHeight,outerWidth

只适用于Netscape 4+，指定窗口总的高度、宽度，以像素为单位。该区域包括菜单栏、工具栏、滚动条和窗口边框

pageXOffset,pageYOffset

整数型只读值，指定当前文档已经向右(pageXOffset)、向下(pageYOffset)滚动了多少像素

screenX,screenY

整数型只读值，指定窗口左上角在屏幕的x,y坐标。如果当前窗口是框架，那么这两个属性指定框架左上角在顶层窗口上的x,y坐标

window对象的方法：

方法

描述

alert(message)

弹出对话框，显示message信息，无返回值

blur()

从窗口中移去键盘输入焦点，无返回值

clearInterval(intervalId)

清除先前设置的定时器，无返回值

clearTimeout(timeoutId)

清除先前设置的超时，无返回值

close()

关闭窗口，无返回值

confirm(question)

显示一个确认对话框，单击“确定”按钮时返回true，否则返回false

focus

得到键盘的输入焦点，同时将该窗口放在其他窗口的前面，无返回值

getComputedStyle(elt)

返回一个只读的style对象，它包含了应用于指定文档元素elt的所有CSS样式(不仅仅是嵌入样式)。从这个计算样式对象查询得到的定位属性(如left,top,width等)总是以像素值返回

moveBy(dx,dy)

将窗口从当前位置移动指定的距离，无返回值

moveTo(x,y)

将窗口移动到指定的位置，无返回值

open(url,name,features)

在name参数指定的窗口中显示url指定的文档。如果省略了name参数，或没有name参数指定的窗口，那么将创建一个新的窗口。features是可选参数，这是一个字符串，用于指定新窗口的大小和样式。字符串中，使用逗号分隔各个特性。所有的平台都支持的特性名称有：width=pixels,height=pixels,location,menubar,resizable,status和toolbar。在IE中，使用left=x和top=y设置窗口的位置；在Netscape中，使用screenX=x和screenY=y来设置窗口的位置。该方法返回现有窗口对象或新建窗口对象。

print()

打印文档内容，相当于用户点击了浏览器中的“打印”按钮，无返回值

prompt(message,default)

打开一个提示对话框，显示message指定的内容，并等待用户输入一段文字。default参数是可选参数，指定在输入框中最初显示的内容，返回值为字符串；如果输入框中没有字符，则返回空字符串；如果单击了“取消”按钮，则返回null值

resizeBy(dw,dh)

将窗口缩放到指定的大小，无返回值

resizeTo(width,height)

将窗口的大小修改为指定的宽度和高度

scroll(x,y)

将窗口的内容(文档)滚动到指定的坐标，无返回值。在JavaScript1.2后被scrollTo()方法替代

scrollBy(dx,dy)

将窗口的内容(文档)滚动到指定的量，无返回值

scrollTo(x,y)

将窗口的内容(文档)滚动到指定的位置，无返回值

setInterval(code,interval,args...)

每隔interval指定的毫秒数就执行一次code字符串指定的代码。IE5及以后的版本中，code参数可以用函数引用来代替字符串，此时，每隔interval指定的毫秒数就执行一次该函数。该方法返回一个内部的ID值，该值可以传递给clearInterval()方法来取消代码的周期执行

setTimeout(code,delay)

在延迟delay参数指定的毫秒数之后执行code字符串指定的代码。IE5及以后的版本中，code参数可以用函数引用来代替字符串，此时，延迟delay指定的毫秒数就执行一次该函数。该方法返回一个内部的ID值，该值可以传递给setTimeout()来取消延迟执行的代码。注意，该方法是立即返回，并不是在返回之前等待delay指定的毫秒数

小提示：当一个窗口要访问另一个窗口的属性和方法时(包括框架)，只有它们的内容来自同一个域的同一个服务器，才有可能在一个窗口中访问另一个窗口的所有属性和方法。否则，处于安全的原因，浏览器将不允许某些属性和方法的访问。

应用举例

打开和关闭窗口

我们除了通过在浏览器中执行“文件”→“新建”→“窗口”命令来打开一个新窗口外，也可以通过JavaScript代码来打开一个新的浏览器窗口，这需要用到window对象的open()方法。它的语法为：

var window_obj = window.open("url",windowname,[features]);

例如下面的代码在点击按钮之后打开一个新的窗口，新窗口中显示的是百度首页的内容。

打开一个新窗口

var winObj = window.open("https://www.baidu.com/","百度一下");

open()方法的features参数指定一组定制新窗口特性的选项，其有效值如下表所示：

选项名称

可选值

描述

directories

yes/no 或 1/0

新窗口中是否显示“链接”按钮

height

整数值

新窗口的高度

width

整数值

新窗口的宽度

location

yes/no 或 1/0

新窗口中是否显示地址栏

menubar

yes/no 或 1/0

新窗口中是否显示菜单栏

resizable

yes/no 或 1/0

新窗口是否允许用户改变大小

scrollbars

yes/no 或 1/0

新窗口是否显示滚动条

status

yes/no 或 1/0

新窗口是否显示状态栏

toolbar

yes/no 或 1/0

新窗口是否显示工具栏

选项的使用方法为：使用等号将选项名称与选项值对应起来，选项之间使用逗号分隔。例如下面的例子：

打开一个新窗口 关闭打开窗口

var winObj = window.open("https://www.baidu.com/",

"百度一下",

"width=640,height=350,toolbar=yes,

directories=yes,status=no,resizable=yes,

scrollbars=yes,location=yes,menubar=yes"

);

//可以使用close()方法来关闭刚才打开的窗口

winObj.close();

移动和缩放窗口

在JavaScript中有几种方式移动窗口和改变窗口的大小，包括相对移动(相对缩放)和绝对移动(绝对缩放)。此时，传递给window对象的方法的参数以像素为单位，相对放大和移动窗口时，正值表示放大(左移)，负值表示缩小(右移)。看下面的实例代码：

moveBy(10,20); //将窗口向右移动10个像素，向下移动20个像素

moveBy(-10,20); //将窗口向左移动10个像素，向下移动20个像素

resizeBy(15,20); //将窗口在当前大小的基础上横向放大15个像素，纵向放大20个像素

resizeBy(15,-20); //将窗口在当前大小的基础上横向放大15个像素，纵向缩小20个像素

moveTo(0,0); //将窗口移动到屏幕的左上角

resizeTo(480,320); //将窗口大小修改为横向480个像素，纵向320个像素

完成定时任务

window对象提供了一个具有闹钟功能的方法setTimeout()，利用这个方法，可以定时执行某些任务。该方法有两个参数：第一个参数是一个字符串，其内容是一个表达式；第二个参数是表达式延迟执行的时间，以毫秒为单位。

如果使用setTimeout()的函数不断的调用自己(延迟时间非常的短)，就会产生连续动画的效果。我们可通过clearTimeout()方法来终止由setTimeout()方法指定的表达式的执行。

从JavaScript 1.2开始，提供了用于在指定时间间隔中重复执行指定代码的方法setInterval()，某些时候使用这个方法来完成重复性的定时任务更加方便和简单。同样，可以使用clearInterval()方法来终止程序的重复执行。

setTimeout和setInterval()方法的语法格式为：

var timeout = setTimeout("expression",delaytime);

var tumerId = setInterval("expression",delaytime);

clearTimeout(timeout);

clearInterval(tumerId);

下面的例子中使用setInterval()方法来制作一个电子时钟：

现在的时间是：

滚动文档内容

利用window对象的scrollTo()方法，可以移动窗口中文档内容的显示位置。当打开一另一个新窗口时，可以把它的内容滚动到指定的位置。scrollTo()方法在不同的浏览器中显示效果不完全相同。

scrollTo()方法有两个参数，它们指定水平方向和垂直方向的窗口位置，以像素为单位。参数(0,0)表示窗口的左上角；(0,300)表示从开始位置向下滚动300个像素；(300,0)表示从开始位置向右滚动300个像素。scrollTo()方法的语法格式为：

winObj.scrollTo(x,y);

winObj是window对象，包括框架，x为水平坐标位置，y为垂直坐标位置。

下面的例子中点击“返回页面顶部”按钮可以回到页面的顶部。

返回页面顶部

代码为：

window.scrollTo(0,0);