一分钟了解BOM BOM BOM(浏览器对象模型)的核心是window对象 1. window对象 window表示浏览

这是我参与更文挑战的第1天,活动详情请查看:更文挑战

BOM(浏览器对象模型)的核心是window对象

1. window对象

window表示浏览器的一个实例 window对象是js访问浏览器窗口的一个接口,也是es规定的es的Global对象,它们有权访问parseInt()等方法

1.1. 全局作用域

因为window对象同时是es的Global对象,所以所有全局作用域中声明的变量和函数都会变成window对象的属性和方法

//在全局作用域下声明
var age = 18;
function sayAge()
{
    console.log(this.age);
}

//以下结果均是18
console.log(window.age);
sayAge();
window.sayAge();

虽然全局变量会成为window对象的属性,但是这和在window对象上直接定义属性还是有差别的

全局变量不能通过delete操作符删除,但是直接定义的属性可以

但是在IE9的之前版本使用delete删除window属性语句会抛出错误,因为它有一个名为[[Configurable]]的特性,其值被设定为false

尝试访问未声明的变量会抛出错误,我们可以通过查询window对象来知道该变量是否未声明从而避免错误

未声明和未定义

使用没声明的这个变量会报错但是声明了但未定义会undifined

    //访问未声明出错
    var a = b;

    //属性查询
    var a = window.b
    //就算b未定义也不会抛出错误

1.2. 窗口关系及框架

frames集合中包含着页面中所有的框架,每一个框架都有自己的window对象.在frames集合中我们可以通过数值索引或框架名称来访问相对应的window对象,因为每一个框架的名称都包含在了window对象的name属性中.

我们可以通过window.frames[0]或者window.frames["topFrame"]来引用最上方的框架。

但是,window对象里包含着一个top对象和self对象,他们两个分别指向最高最外层的框架和最低最里层的框架,二者都可以和window对象互换使用

//表达是一样的
window.frames[0];
top.frame[0];

和top,self对象相对应的还有一个父对象parent,它直接指向当前框架的父框架.但在没有框架的情况下，parent一定等于top(此时它们都等于window).

我们可以将不同层次的window对象连缀起来

window.parent.parent.parent.parent.frames[0]

1.3. 窗口位置

	IE	Safari	Opera	Chrome	Firefox
支持screenLeft和screenTop属性	√	√	√	√
支持screenX和screenY属性				√	√

我们也可以使用二元操作符确定screenLeft和screenTop属性是否存在,如果是则取得它的值,若否,则取得screenX/Y的值.

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

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

由于每个浏览器的不同我们很难在跨浏览器的情况下取得窗口左边和上边的精确坐标值,所以我们可以适当采用moveTo()和moveBy()方法来将窗口精确的移动到精确位置,moveTo()接收的是新位置的x和y坐标值,而moveBy()接收的是在水平和垂直方向上移动的像素数

这两个方法可能会被浏览器禁用,且二者不适用于框架,只能对最外层的window对象使用

1.4. 窗口大小

IE9+	Safari	Firefox	Opera
outerWidth和outerHeight属性	返回浏览器窗口本身的尺寸	返回浏览器窗口本身的尺寸	返回浏览器窗口本身的尺寸	页面视图容器的大小
innerWidth和innerHeight属性	返回浏览器中页面视图区的大小(减去边框)	返回浏览器中页面视图区的大小(减去边框)	返回浏览器中页面视图区的大小(减去边框)	返回浏览器中页面视图区的大小(减去边框)

Chrome四个属性返回相同的值,即视口大小.

在所有浏览器中document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面视口的信息(建议标准模式)

一分钟了解BOM