JavaScript BOM对象－Window对象及窗口相关操作

window对象是BOM的核心对象，在浏览器环境中，所有可以在全局访问的对象都是该对象的方法或属性。window对象是JavaScript对浏览器访问的一个接口，除做为Global对象外，还可以通过该对象对浏览器进行一定的操作。

全局作用域
窗口位置
- 2.2 screenLeft、screenTop与screenX、screenY获取窗口位置
- 2.2 moveTo()、moveBy()方法改变窗口位置
窗口大小
- 3.1 获取窗口尺寸的属性
- 3.2 resizeTo()、resizeBy()重设窗口大小
窗口的打开与关闭
- 4.1 open()打开新窗口
- 4.2 close()关闭窗口

1. 全局作用域

window对象是ECMAScript中的Global对象，所在以全局作用域中声明的变量、函数等都会成为window的属性和方法。同样，在浏览器环境中，JavaScript中的顶级对象、方法等（如：Array、Date、parseInt()等），也都是做为window对象的一个属性或方法提供的。

示例如下：

var site = 'niefengjun.cn';
function getSite() {
  alert(this.site);
}
alert(window.site);  // 'niefengjun.cn'
getSite();	// 'niefengjun.cn'
window.getSite();	// 'niefengjun.cn'

在JavaScript中，当不指定上级对象时，变量和方法等会被添加到全局对象中。在上面示例中，site变量和getSite()方法没有指定上级对象，所在二者会被添加到window全局对象，所以直接访问二者与通过window访问本质相同（如，直接访问getSite()与使用window.getSite()访问一样）。

在上面示例中，alert是一个JavaScript的内置对象。JavaScript的内置对象也是通过window全局对象提供给用户访问，直接调用alert()方法与window.alert()调用是调用了同一个方法。

var关键字与全局对象

在ECMAScript 6，JavaScript中只提供了var一种定义变量的方式。通过var定义的变量或对象，其作用域是全局（即，会被添加到window对象中）。在ECMAScript 6标准中，增加了定义块级作用域的关键字let和const，通过这两个关键字定义的变量或对象只有块级作用域中起作用，而不会添加到全局对象中。

2. 窗口位置

2.1 `screenLeft`、`screenTop`与`screenX`、`screenY`获取窗口位置

window对象提供了获取和修改窗口位置的属性和方法。screenLeft和screenTop分别表示窗口相对于左边和上边的值，这两个属性在Chrome、Safari、IE中存在，但在Firefox浏览器中不存在，Firefox浏览器提供了两个类似属性screenX和screenY。因此，跨浏览器获取窗口左边和上边的位置时，可使用使用如下兼容代码：

var leftPos=(typeof window. screenLeft=="number") ? window.screenLeft : window.screenX;
var topPos=(typeof window.screenTop=="number") ? window.screenTop:window.screenY;

这几个属性在不同浏览器所表示的区域也不尽相同，在使用时应注意。在Chrome、IE中，表示是从屏幕左边和上边到由window对象表示的页面可见区域的距离。而在在Firefox、Safari中，则表示整个浏览器窗口相对于屏幕的坐标值。

由于获取窗口位置的几个属性在不同浏览器表现不同，而screenX和screenY属性一般又是只读属性，所在不能通过这些属性修改窗口位置。修改窗口位置时，可以使用window对象的moveTo()和moveBy()方法。

2.2 `moveTo()`、`moveBy()`方法改变窗口位置

moveTo()和moveBy()方法可以精确的将窗口移到某一个位置，这两个方法都接收两参数，分别表示新位置的x轴和y轴坐标：

window.moveTo(x, y)
window.moveBy(x, y)

如，将窗口移动到左上角：

window.moveTo(0,0);

需要注意的是，这两个方法可能会被浏览器禁用。另外，这两个方法都不适用于框架，只能在最外层的window对象使用。

3. 窗口大小

3.1 获取窗口尺寸的属性

innerWidth和innerHeight属性用于获取浏览窗口内容区域的尺寸，而outerWidth和outerHeight用于获取浏览器窗口的外部尺寸。与窗口位置相关属性一样，获取窗口大小的属性在不同浏览器表现也不相同。主流浏览器均提供了innerWidth、innerHeight、outerWidth、outerHeight四个属性。

早期的浏览器，各个浏览器对两咱属性的解析不相同，但在IE9+及最新版本Chrome、Firefox、Safari中，outerWidth、outerHeight表示浏览器窗口本身的宽高，而innerWidth、innerHeight表示DOM页面（视口）的宽高。

而在早期的IE中，需要借住document.body.clientWidth和document.body.clientHeight属性来获取视口的大小。但document.body.clientWidth和document.body.clientHeight表示渲染后页面的大小，会和实际视口大小存在一定差异。在跨浏览器获取页面宽高时，我们可以通过以下方式获取：

var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;

if(typeof pageWidth!= 'number'){
  pageWidth = document.body.clientWidth;
  pageHeight = document.body.clientHeight;
}

3.2 `resizeTo()`、`resizeBy()`重设窗口大小

resizeTo()和resizeBy()方法都可以重设窗口的大小，二者都接收两个参数。不同的是，resizeTo()表示窗口的新高度和新宽度，而resizeBy()表示高度差。示例如下：

// 将窗口设置为100*100
window.resizeTo(100, 100);
// 将窗口设置为200*300
window.resizeBy(100, 200);

这两个方法与窗口移动方法一相，也可能会被浏览器禁用。另外，这两个方法都不适用于框架，只能在最外层的window对象使用。

4. 窗口的打开与关闭

4.1 `open()`打开新窗口

window对象中提供了打开新窗口的方法open()，该方法语法结构如下：

window.open(strUrl, strWindowName, [strWindowFeatures]);

strUrl，在新窗口中打开的Url
strWindowName，在新窗口名
strWindowFeatures，逗号分隔的新窗口的设置描述字符串。其中可以设置新窗口的位置、尺寸、工具栏、窗口功能等，详细设置请参考：window.open()参数

如，使用open()方法打开一个新窗口，并为新窗口的位置和尺寸进行调整：

var myWindow = window.open('http://niefengjun.cn', 'IT笔录', 'height=400,width=400,top=10,left=10');

// 调整大小
myWindow.resizeTo(500, 500);
// 移动位置
myWindow.moveTo(100, 100);

注意：open()方法曾经被广告商滥用，严重影响用户体验，所以一些浏览器对open()方法进行了一些限制；而用户通过浏览器设置，也可以屏蔽弹出窗口。所以，在使用这个方法时，应加以斟酌。

4.2 `close()`关闭窗口

关闭窗口使用close()方法，这个方法可以关闭当前窗口或某个引用的窗口。

如，关闭当前窗口：

window.close();

关闭使用open()方法打开的窗口：

var myWindow = window.open('http://niefengjun.cn', 'IT笔录', 'height=400,width=400,top=10,left=10');
myWindow.close();

1. 全局作用域

2. 窗口位置

2.1 screenLeft、screenTop与screenX、screenY获取窗口位置

2.2 moveTo()、moveBy()方法改变窗口位置