BOM

window作为BOM的核心（顶层对象），表示浏览器窗口以及页面的可视区域。同时，window对象也是ECMAScript中的Global对象。因此，所有的全局变量，函数都是window的属性和方法。而且原生的构造函数比如Math、Date、Function等都存在于它的命名空间下。

只介绍实际开发中常用的以及需要注意的点：

一、window对象

1、全局作用域中的变量、函数都会成为window的属性和方法。

var num = 12;
alert(window.num); // 12

2、全局变量不能通过delete操作符删除，直接在window对象上定义的属性则可以删除。

var num = 12;
window.color = 'red';

// 在IE<9中会抛出错误
delete window.num;
console.log(window.num); // 12

delete window.color;
console.log(window.color); // undefined

3、导航和打开窗口

window.open() 可以导航到新的URL，同时会打开新的窗口。

二、location对象

location对象是用的最多的BOM对象之一，它很特别，既是window的属性，又是document的属性，所以，window.location和document.location引用的是同一个对象的；提供了当前窗口中加载的文档的有关信息和一些导航功能。

location对象可以将URL解析为独立的片段。

属性名	demo	说明
hash	#topic	URL中的hash
host	www.xxx.com:80	主机名和端口
hostname	www.xxx.com	主机名
href	https://xxx.baidu.com	完整的URL
pathname	/topic/	URL中的目录和文件名
port	8080	端口号
protocol	http	协议
search	?type=1	查询字符串

1、解析查询字符串参数方法可以查看

2、位置操作

打开新的URL， 以下三种方法效果是一样的。

window.location = 'www.xxx.com' 
location.href = 'www.xxx.com'
location.assign('www.xxx.com')

修改location对象的属性，可以改变当前加载的页面。

   // 页面不会重新加载
   url改为 www.baidu.com#topic
   location.hash = '#topic';

   url改为 www.baidu.com?type=1
   location.search = '?type=1';

   url改为 www.xxx.com
   location.hostname = 'www.xxx.com';

   url改为 www.baidu.com/topic/
   location.pathname = 'topic'

   url改为 www.baidu.com:8080
   location.port = '8080'

以上方式，除了hash外，都会重新加载页面，并且会在浏览器中生成新的记录。

location.replace()方法接收一个参数，也就是要导航到的URL，该会替换当前的URL，不会在浏览器生成历史记录。
location.reload()方法会重新加载当前页面。如果当前页面没有改变过，若不传递参数，则会从浏览器缓存中加载，若添加true参数，则会从服务器加载。

三、navigator 对象

1、navigator 对象一般是用来识别客户端浏览器的。最常用的就是userAgent 属性。用来检测浏览器相关的信息。比如

navigator.userAgent
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36"

2、 检测插件

检测浏览器插件。对于非IE 使用plugins属性，值为数组。数组每一项为一个插件实例，每个实例包括name、description、filename length。可以通过name来检测浏览器是否有某个插件。

• 非IE检测

function hasPlugin(name) {
    name = name.toLowerCase();
    for (var i = 0; i < navigator.plugins.length; i++) {
        if (~navigator.plugins[i].name.toLowerCase().indexOf(name)) {
            return true;
        }
    }
    return false;
} 

• 检测IE唯一的方式是使用专有的ActiveXObject()类型，并创建一个特定的实例，使用COM对象的方式作为唯一标识符。检测插件，必须知道该插件的COM标识符。

function hasPluginForIE(name) {
    try {
        new ActiveXObject(name);
        return true
    } catch(e) {
        return false;
    }
}

之所以使用try/catch是因为如果实例化不成功就会抛出错误。

四、history 对象

go()方法，接收一个参数。

1、参数如果是整数，正数则表示前进，向前跳转；负数表示后退，向后跳转。
2、参数如果是字符串，则会跳转到历史记录中包含该字符串的最近位置的URL。

history.go(2)  前进两个页面
history.go(-1) 后退一个页面

还可以使用back()和forward()代替。

BOM中还有screen对象，保存着和客户端显示器有关的信息，一般用于站点的分析，这里就不扩展了。