JavaScript核心之一——BOM

window 对象

BOM 的核心对象是 window，它表示浏览器的一个实例。

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

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

窗口位置

IE、Safari、Opera 和 Chrome 都提供了 screenLeft 和 screenTop 属性，分别用于表示窗口相对于屏幕左边和上边的位置。Firefox 则在 screenX 和 screenY 属性中提供相同的窗口位置信息。

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

//将窗口移动到屏幕左上角 window.moveTo(0,0);
window.moveTo(0,0);
//将窗向下移动 100 像素 window.moveBy(0,100);
window.moveBy(0,100);
//将窗口移动到(200,300) window.moveTo(200,300);
window.moveTo(200,300);
//将窗口向左移动 50 像素 window.moveBy(-50,0);
window.moveBy(-50,0);

窗口大小

var pageWidth = window.innerWidth,
        pageHeight = window.innerHeight;
    if (typeof pageWidth != "number"){
        if (document.compatMode == "CSS1Compat"){
            pageWidth = document.documentElement.clientWidth;
            pageHeight = document.documentElement.clientHeight;
        } else {
            pageWidth = document.body.clientWidth;
            pageHeight = document.body.clientHeight;
        }
}

在以上代码中，我们首先将 window.innerWidth 和 window.innerHeight 的

值分别赋给了 pageWidth 和 pageHeight。然后检查 pageWidth 中保存的是

不是一个数值;如果不是，则通过检查 document.compatMode来确定页面是否处于

标准模式。如果是，则分别使用 document.documentElement.clientWidth

和document.documentElement.clientHeight 的值。否则，就使用

document.body.clientWidth 和 document.body.clientHeight 的值。

location 对象

location 对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。它既是 window 对象的熟悉，也是 document 对象的属性，换句话说，window.location 和 document.location 引用的是同一个对象。location 对象的用处不只表现在它保存着当前文档的信息，还表现在它将 URL 解析为独立的片段，让开发人员可以通过不同的属性访问这些片段。下表列出了 location 对象的所有属性：
在这里插入图片描述

位置操作

使用 location 对象可以通过很多方式来改变浏览器的位置。

location.assign("http://www.wrox.com");
window.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";
//当通过上述任何一种方式修改 URL 之后，浏览器的历史记录中就会生成一条新记录，因此用户通过单击“后退”按钮都会导航到前一个页面。

location.replace("http://www.wrox.com/");
//在调用 replace() 方法之后，用户不能回到前一个页面

location.reload();//可能从缓存中加载
location.reload(true);//从服务器重新加载
//reload() 重新加载当前页面，位于 reload()调用之后的代码可能会也可能不会执行，这要取决于网络延迟或系统资源等因素。为此，最好将 reload()放在代码的最后一行。

navigator 对象

下表列出了BOM对象存在于所有浏览器中的属性和方法，以及支持它们的浏览器版本。
在这里插入图片描述

检测插件

检测浏览器中是否安装了特定的插件是一种最常见的检测例程。对于非 IE 浏览器，可以使用 plugins 数组来达到这个目的。该数组中的每一项都包含下列属性。

name:插件的名字。
description:插件的描述。
filename:插件的文件名。
length:插件所处理的 MIME 类型数量

screen 对象

screen 对象基本上只用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等。每个浏览器中的 screen 对象都包含着各不相同的属性，下表列出了所有属性及支持相应属性的浏览器。
在这里插入图片描述

history 对象

history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。
使用 go()方法可以在用户的历史记录中任意跳转，可以向后也可以向前。这个方法接受一个参数，表示向后或向前跳转的页面数的一个整数值。

//后退一页 
history.go(-1);
history.back();
//前进一页 
history.go(1);
history.forward();
//前进两页 
history.go(2);