天天看点

JavaScript之window对象(BOM)window对象

window对象

BOM的核心是window,它表示浏览器的一个实例,既是通过JavaScript访问浏览器窗口的一个接口,又是global对象。

全局作用域

由于window对象扮演着global对象的一个角色,因此在全局作用域中定义的变量、函数都会变成window对象的属性。

var age = 10;

function sayAge () {
    alert(this.age);
}

alert(window.age); //10

sayAge(); //10

window.sayAge(); //10
           

由于sayAge()函数是在全局作用域下定义的,因此this引用的是window对象,所以this.age被映射为window.age了即10。

定义全局变量与直接在window上添加属性还是有点区别的:全局变量不能通过delete操作删除,而直接在window上添加的属性能通过delete操作符删除。

var age = 10; //定义全局变量

window.color = "blue"; //在window对象上添加属性color

delete window.age;

delete window.color;

console.log(age); //10

console.log(window.color); //undefined 被删除了
           

用关键字var声明的变量有个特性[[configurable]]默认值为false,因此该变量不能通过delete操作符删除。

要注意:尝试访问未声明的变量出报错。但可以通过window来查询某个可能未声明的变量是否存在。

var a = b; //报错,因为b未声明

var a = window.b; //通过window来查询b是否存在。
           

窗口关系与框架

frames[]

如果页面中有多个框架,则每个框架都有自己的window对象,并保存在frame[]对象中。可以通过 索引(从上到下、从左到右)访问。 返回窗口中所有命名的框架。 该集合是 Window 对象的数组,每个 Window 对象在窗口中含有一个框架或 <iframe>。属性 frames.length 存放数组 frames[] 中含有的元素个数。注意,frames[] 数组中引用的框架可能还包括框架,它们自己也具有 frames[] 数组。

可以通过 frames.length得到页面中框架的个数。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
	<title>javascript</title>
  </head>
  <body>
  
    <iframe src="http://www.baidu.com"></iframe>
    <iframe src="http://www.baidu.com"></iframe>
    <iframe src="http://www.baidu.com"></iframe>
  
  
  <script>
      /* 在此处书写javascript代码 */
	  
      console.log(window.frames.length); //3 定义了3个iframe框架
      
		
  </script>
  </body>
</html>
           

效果:

JavaScript之window对象(BOM)window对象

图中,框架数量为3个。

窗口位置

screenLeft 和screenTop

这个两个属性分别表示 窗口 相对于 屏幕左边和上边的位置。当浏览器是全屏时,这两个属性的值均为0,所以测试只有缩小浏览器窗口。

console.log(window.screenLeft);
console.log(window.screenTop);
           

效果:

JavaScript之window对象(BOM)window对象

screenX 和screenY

与上例达到的效果一样。

窗口大小

outerWidth 和outerHeight

这两个属性返回 浏览器本身的尺寸,也就是整个浏览器的尺寸。

innerWidth 和innerHeight

这两个属性返回 页面视图区的尺寸。文档显示区的尺寸。

window常见方法

alert()

消息警告框,带有信息和一个确定按钮的警告框。

window.alert("这是一段消息!");
           

效果:

JavaScript之window对象(BOM)window对象

confirm()

带有指定消息、确定按钮和取消按钮的对话框,当点出确定按钮时,该方法返回true,当点出取消按钮时,该方法返回false。

window.confirm("点出确定还是取消?");
           

效果:

JavaScript之window对象(BOM)window对象

prompt()

显示一个提示用户可输入的对话框。当用户点击取消按钮时,该方法返回null,当点击确定按钮时,该方法返回用户输入的内容。

该方法有两个参数,第一个参数是输入框的标题,第二个参数是输入框默认的内容。

window.prompt("这是输入框的标题", "这是一段默认内容");
           

效果:

JavaScript之window对象(BOM)window对象

open()

打开一个窗口,有四个参数, 第一个参数是开打开的URL, 第二个参数是新窗口的名称, 第三个参数是声明要显示的标准浏览器的特性,可以是多个, 第四个参数是确定打开的新窗口是在历史URL中新建一条新项目,还是替换当前页面的URL,"true"表示替换,"false"表示新建条目。

注:第一个参数可以为空字符,表示打开浏览器的 about:blank 页。

还可以指定打开新窗口的方式:_black(新窗口打开) _self(当前窗口打开) _top()、parent(父级窗口打开)

还可以指定打开的新窗口的尺寸大小。

window.open("http://sina.com", false);
           

window对象的其它属性和方法如下图所示:

属性

JavaScript之window对象(BOM)window对象

方法

JavaScript之window对象(BOM)window对象