聊聊BOM的那些事

BOM

BOM的全称是Browser Object Model，被译为浏览器对象模型
BOM提供了独立于HTML页面内容，而与浏览器相关的一系列对象，主要被用于管理浏览器窗口及与浏览器窗口之间通信等功能
BOM由一系列对象构成，这些对象可以简单理解为是由各个浏览器所提供的

Window对象

BOM中最核心的对象就是Window对象，该对象表示运行HTML页面的浏览器窗口
在浏览器环境中，Window对象具有双重角色，该对象既是允许JavaScript逻辑访问浏览器窗口的一个对象，又是ECMAScript规范中的Global全局对象
在浏览器环境中运行JavaScript逻辑时，在全局作用域中定义的对象、变量和函数都是Window对象的属性和方法
也可以通过Window对象访问Global全局对象的属性和方法。

全局作用域

在浏览器环境中，由于ECMAScript规范中Window对象代表了Global全局对象，因此所有定义在全局作用域中的变量和函数，都可以通过Window对象的属性和方法方式访问

var name='前端';
function fun(){
    console.log('this is function');
}
//window对象的属性和方法方式访问
console.log(window.name);
window.fun();

Window对象的属性

Window对象的属性数量较多，包含了浏览器窗口的基本信息、也包含了一些复杂的信息。可以人为将Window对象分为以下三类：
1.BOM中其他对象，例如Navigator对象等
2.一些有关浏览器窗口的基本信息等，这些属性多属于DOM 0级别，并不是W3C标准规范
3.包含了大量有关HTML5版本新增的功能等

浏览器窗口的宽度和高度

Window对象提供的属性中可以获取当前浏览器窗口的宽度和高度

• innerWidth和innerHeight属性：只读属性，返回当前浏览器窗口的可视宽度和高度，如果存在滚动条，也包含滚动条
• outterWidth和outterHeight属性：

Window对象与self属性

Window对象的self属性返回当前浏览器窗口的只读属性，self属性返回的是Window对象的引用

console.log(window==window.self);

Window对象的方法

Window对象的方法

• 系统提示框：alert()方法、confirm()方法和prompt()方法
• 打开与关闭窗口：open()与close()方法、showModalDialog()
• DOM规范标准0级别的一些方法
• 定时器：setTimeout()与clearTimeout()、setInterval()与clearInterval()

Navigator对象

Navigator对象包含了一些有关浏览器状态的信息。可以通过window.navigator属性得到Navigator对象
Navigator对象提供一系列常用属性，获取当前浏览器的信息

• appCodeName：浏览器的代码名
• appName：浏览器的名称
• appVersion：浏览器的平台和版本信息
• platform：运行浏览器的操作系统平台

userAgent属性

Navigator对象的userAgent属性返回由客户机发送服务器的user-agent头部的值，userAgent属性是一个只读的字符串，声明了浏览器用于HTTP请求的用户代理头的值
通过userAgent属性获取用户当前使用的浏览器产品，提供浏览器兼容解决方案
通过userAgent属性获取用户当前使用的操作系统信息

History对象

History对象包含用户在浏览器中访问过的URL(网址)

• length属性：History对象的length属性可以获取用户在浏览器中访问网址的数量

console.log('用户访问的网址数量为：'+history.length);

• History对象还提供了以下方法实现浏览器前进和后退功能

forward()：实现跳转下一个页面，作用和浏览器的前进按钮一样
back()：实现跳转上一个页面，作用和浏览器的回退按钮一样
go()：实现跳转到指定的页面，如果为负数表示后退，如果为正数表示前进

Location对象

Location对象包含了浏览器的地址栏中的信息，该对象主要用于获取和设置地址
Location对象很特别，因为该对象既是Window对象的属性，又是Document对象的属性

console.log(window.location==document.location);//true

Location对象的属性

Location对象不仅存储了地址栏中的信息，还提供了解析功能，可以通过不同的Location对象的属性访问不同的地址栏中的信息

• host：返回服务器名称和端口号
• hostname：返回服务器名称
• href：返回当前加载页面的完整URL
• pathname：返回当前URL中的目录和文件名
• port：返回当前URL中的端口号
• protocol：返回页面使用的网络协议

Location对象的方法

• assign()：载入一个新的文档，作用和直接修改Location相同
• reload()：重新载入当前文档，作用和刷新按钮一样，参数为true时，则会强制清空缓存刷新页面
• replace()：用新的文档替换当前文档(不会生成历史记录，不能使用回退按钮回退)

定时器

定时器的具体方法由Window对象提供

• 延迟执行：指的是指定程序代码在指定时间后被执行，而不是立即被执行

setTimeout()方法设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码

var timeoutID=scope.setTimeout(function,delay);
function:要调用的函数或要执行的代码
delay:延迟的毫秒数(一秒等于1000毫秒)，函数的调用会在该延迟之后发生。如果省略该参数，delay取默认值0

该方法的返回值timeoutID是一个正整数，表示定时器的编号。这个值可以传递给clearTimeout()来取消该定时

• 周期执行：指的是指定程序代码在指定时间为间隔，重复被执行

setInterval()方法重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟

var timeoutID=scope.setInterval(function,delay);

function:要调用的函数或要执行的代码
delay:延迟的毫秒数(一秒等于1000毫秒)，函数的调用会在该延迟之后发生，如果省略该参数，delay取默认值0
该方法的返回值timeoutID是一个正整数，表示定时器的编号，这个值可以传递给clearInterval()来取消该定时