[JavaScript学习]JavaScript浏览器对象-window对象

在上一篇文章中我们介绍了"JavaScript浏览器对象-navigator对象"。今天将继续学习：JavaScript浏览器对象-window对象。

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

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

window对象的属性和方法

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

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

window对象的方法：

应用举例

打开和关闭窗口

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

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

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

打开一个新窗口

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

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

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

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

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);        //将窗口移动到屏幕的左上角
resixeTo(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);

返回javascript教程主目录>>