javascript进阶学习之window对象开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情

说到window对象我们不得不提及BOM，BOM是browser object model的缩写，正如其名为浏览器对象模型。BOM提供了独立于内容而与浏览器窗口进行交互的对象，BOM由一系列相关的对象组成，其中最主要对象为window，下面我们将分类讲解window对象。

概述

window对象是BOM顶层(核心对象)，其他对象均为window对象延伸拓展，成为其子对象。直接调用其子对象可以不指明window对象，其子对象或者函数的作用域为全局（我们可以在局部的作用域定义window.variable将变量提升为全局变量）。接下来我们将从其子对象和函数两方面刨析。

w3school对window对象的叙述

// true
window.navigator === navigator;

self对象

self对象与window对象完全一致，self通常用于确认在当前窗口内。

// true
window.self === window;
// true
self.self === self;

子对象(下面对于子对象函数的描述均省略显示使用window对象)

1、window.frames[]
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。通过frames[name]或frames.name（name为框架的name）获取框架的window对象。

注释：没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。

test.html

<html>
<head>
	<title>test</title>
</head>
<body>
	<p>test</p>
	<iframe src="./test.html" name="myFrame"></iframe>
	<script type="text/javascript">
		window.onload = function () {
			console.log(frames["myFrame"]);
		}
	</script>
</body>
</html>

获取框架数量

// 无框架则为0
window.length

返回父对象

// true
frames["myFrame"].parent === window;

返回顶层元素

// true
frames["myFrame"].top === window;

2、window.navigator(只读引用)

Navigator 对象包含有关浏览器的信息。

---add-in
geolocation | 返回地理位置信息

3、window.screen(只读引用)

Screen 对象中存放着有关显示浏览器屏幕的信息。JavaScript 程序将利用这些信息来优化它们的输出，以达到用户的显示要求。

4、window.location
Location 对象包含有关当前 URL 的信息。

属性 | 描述
assign() | 加载新的文档。
reload() | 重新加载当前文档。
replace() | 用新的文档替换当前文档。

5、window.history(只读引用)
History 对象包含用户（在浏览器窗口中）访问过的 URL。是一个类似于栈的数据结构

属性 | 描述
length | 返回浏览器历史列表中的 URL 数量。

函数 | 描述
back() | 后退(history列表上一个URL)
forward() | 前进(history列表下一个URL)
go() | 加载history列表中某个一个URL
6、window.document

函数

1、窗体控制函数

moveBy()
可相对窗口的当前坐标把它移动指定的像素。
moveTo()
把窗口的左上角移动到一个指定的坐标。

// 右移x，下移y
window.moveBy(x,y);

// 直接到(x, y)坐标
window.moveTo(x,y);

resizeBy()
按照指定的像素调整窗口的大小。
resizeTo()
把窗口的大小调整到指定的宽度和高度。

// 窗口宽度增加width，高度增加height
resizeBy(width,height);
// 窗口宽度设置为width，高度设置为height
resizeTo(width,height);

2、滚动轴控制函数

scrollTo()
按照指定的像素值来滚动内容。
scrollBy()
把内容滚动到指定的坐标。

// 向右滚动xs，向下滚动ys
scrollBy(xs, ys);
// 滚动到(xs，ys)
scrollTo(xs, ys);

3、窗体焦点控制函数
腾讯的在线笔试似乎就是用这个防止作弊的(切换窗口)

focus()
将键盘焦点赋予某一窗口。
blur()
把键盘焦点从顶层窗口移开。

4、新建窗体函数

open()
open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。参考文档
close()
close() 方法用于关闭浏览器窗口。

// 打开窗口
var testWin = window.open("http://www.w3school.com.cn","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400");

// 关闭窗口
testWin.close;

5、对话框函数

alert()
显示带有一段消息和确认按钮的警告框。
confirm()
显示带有一段消息以及确认按钮和取消按钮的对话框。返回值为（确认按钮？ true : false）
prompt()
显示带有一段消息以及输入框、确认按钮和取消按钮的对话框。
返回值为：输入的字符串或者null（取消按钮）

// alert()
alert('hello');

// confirm()
confirm('确认吗？') ? console.log('您点击了确认') : console.log('您点击了取消');

// prompt
var string = prompt('请输入学号');
string !== null ? console.log('学号是' + string) : console.log('您点击了取消'');

6、时间等待和间隔函数

setTimeout()/clearTimeout()
按照指定的周期（以毫秒计）来调用函数或计算表达式 / 取消前者设定的计时器
setInterval/clearInterval()
在指定的毫秒数后调用函数或计算表达式 / 取消前者设定的计时器

其他属性

1、状态栏属性

window.defaultStatus
设置或返回窗口状态栏中的默认文本。
window.status
设置窗口状态栏的文本。

2、窗口大小

innerHeight
页面可视化区域的高度（包含滚动条）
innerWidth
页面可视化区域的宽度（包含滚动条）
outerHeight
窗口可视化区域的高度（包含页面可视化区域和浏览器状态栏、工具栏等，即屏幕高度减去任务栏的高度）
outerWidth
窗口可视化区域的宽度（解释同上）

3、位置偏移

pageXOffset
设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset
设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
screenLeft / screenTop / screenX / screenY

只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY

4、opener
返回对创建此窗口的窗口的引用。

5、窗口关系

name
设置或返回窗口的名称。
parent
返回父窗口。
top
返回顶层的先辈窗口。
closed
返回一个窗口是否关闭。