JavaScript中的Window对象

声明：本人的所有博客皆为个人笔记，作为个人知识索引使用，因此在叙述上存在逻辑不通顺、跨度大等问题，希望理解。分享出来仅供大家学习翻阅，若有错误希望指出，感谢！

window对象

window对象代表浏览器的一个实例

全局作用域

• 由于window对象同时扮演着JavaScript中Global对象的角色，因此所有在全局作用域中声明的变量、函数，都会变成window对象的属性和方法

• 定义全局变量与在window对象上直接定义属性是不一样的，全局变量不能通过delete操作符删除，而在window对象上直接定义属性可以用delete操作符删除

  • 因为直接定义的全局变量的[[Configurable]]特性默认为false

• 尝试访问未声明的变量会报错，但是通过查询window对象可以知道某个变量是否未声明（不会报错）

窗口关系及框架

如果页面包含框架（frame），则每个框架都有一个自己的window对象，并且保存在frames集合中，可以通过数值索引（从0开始，从左到右，从上到下）或者框架名称来访问相应的window对象，每个window对象都有一个name属性，包含框架的名称

框架对象：

• top对象始终指向最高层框架，也就是浏览器窗口，使用它可以确保在一个框架中正确访问另一个框架
• parent对象始终指向当前对象的直接上层框架
• window对象指向当前框架的特定实例
• 在使用框架的情况下，浏览器中会存在多个Global对象

窗口位置

screenLeft和screenTop属性，分别用于表示窗口相对于屏幕左边和上边的位置

screenX和screenY与screenLeft和screenTop属性作用相同，两组属性适用于不同的浏览器

以下代码可以跨浏览器获取窗口左边和上边的位置

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

移动窗口位置

window.moveTo(新x坐标，新y坐标)	//单位为像素，将窗口移动到参数指定位置
window.moveBy(水平方向移动距离，垂直方向移动距离)	//单位为像素，将窗口移动指定距离，可以为负值，负值表示反方向

• 这两个方法都可能被浏览器禁用
• 这两个方法都不适用于框架，只能对最外层window对象使用

窗口大小

难以跨浏览器确定一个窗口的大小

大多数浏览器中：

innerWidth、innerHeight、outerWidth、outerHeight

• 其中outerWidth、outerHeight返回浏览器本身的尺寸，innerWidth、innerHeight返回页面视图的大小（减去边框）
• 在chrome浏览器中innerWidth、innerHeight与outerWidth、outerHeight返回相同的值

以下代码可跨浏览器获取页面视口大小

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