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>
效果:

图中,框架数量为3个。
窗口位置
screenLeft 和screenTop
这个两个属性分别表示 窗口 相对于 屏幕左边和上边的位置。当浏览器是全屏时,这两个属性的值均为0,所以测试只有缩小浏览器窗口。
console.log(window.screenLeft);
console.log(window.screenTop);
效果:
screenX 和screenY
与上例达到的效果一样。
窗口大小
outerWidth 和outerHeight
这两个属性返回 浏览器本身的尺寸,也就是整个浏览器的尺寸。
innerWidth 和innerHeight
这两个属性返回 页面视图区的尺寸。文档显示区的尺寸。
window常见方法
alert()
消息警告框,带有信息和一个确定按钮的警告框。
window.alert("这是一段消息!");
效果:
confirm()
带有指定消息、确定按钮和取消按钮的对话框,当点出确定按钮时,该方法返回true,当点出取消按钮时,该方法返回false。
window.confirm("点出确定还是取消?");
效果:
prompt()
显示一个提示用户可输入的对话框。当用户点击取消按钮时,该方法返回null,当点击确定按钮时,该方法返回用户输入的内容。
该方法有两个参数,第一个参数是输入框的标题,第二个参数是输入框默认的内容。
window.prompt("这是输入框的标题", "这是一段默认内容");
效果:
open()
打开一个窗口,有四个参数, 第一个参数是开打开的URL, 第二个参数是新窗口的名称, 第三个参数是声明要显示的标准浏览器的特性,可以是多个, 第四个参数是确定打开的新窗口是在历史URL中新建一条新项目,还是替换当前页面的URL,"true"表示替换,"false"表示新建条目。
注:第一个参数可以为空字符,表示打开浏览器的 about:blank 页。
还可以指定打开新窗口的方式:_black(新窗口打开) _self(当前窗口打开) _top()、parent(父级窗口打开)
还可以指定打开的新窗口的尺寸大小。
window.open("http://sina.com", false);