ECMAScript 是 JavaScript 的核心，但如果要在 Web 中使用 JavaScript，那么 BOM（浏览器对象模型）则无疑才是真正的核心。BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。

下面介绍主要的几个BOM对象.

window对象

BOM 的核心对象是 window，它表示浏览器的一个实例。在浏览器中，window 对象有双重角色， 它既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。这意味若在网页中定义的任何一个对象、变量和函数，都以 window 作为其 Global 对象，因此有权访问
parseInt()等方法

全局作用域

也就是ES中的global角色, 在全局中定义的变量和方法(函数), 都会挂载在window对象上.
但是要注意一点:

var color = 'black';
delete color; //false
console.log(color); //black;

window.color2 = 'pink';
delete color2; // true
console.log(color2); // error

窗口关系和框架

HTML5不在推荐使用frameset, frame元素. 此处略过

窗口位置

主要是 screenX, screenY, screenTop, screeLeft 几个属性

窗口大小

• innerWidth
• innerHeight
• outerWidth
• outerHeight

另外, document.documentElement(或者是document.body)的clientWidth和clientHeight也保存着窗口大小信息

PS : moveTo, moveBy, resizeTo, resizeBy在现代浏览器中默认被禁用

导航和打开窗口

基本语法

// 打开
var win = window.open(url, target值, 新窗口特征字符串参数, bool)
// 关闭
win.close();
//可以通过win是否存在来检测弹窗是否被屏蔽

target有三种值:

• _self
• _blank (默认)
• _top
• _parent

新窗口特征字符串, 主要是以下参数:

• fullscreen: yes || no
• width: number && number>100
• height: number && number>100
• left: number && number >= 0
• top: number && number >= 0
• location: yes || no
• menubar: yes || no
• resizable: yes || no
• scrollbars: yes || no
• status: yes || no
• toolbar: yes || no

使用方式: “fullscreen=yes,width=200,height=300…”(不能有空格)

setTimeout和setInterval

setTimeout是我们经常用到的定时器方法:

var st = setTimeout('alert("hi"))',1000);// 这里只是一个示例, 尽量避免第一个参数传入字符串

// 如果上面的代码没有执行, 那么可以同下面的语句清除
cleartTimeout(st)

由于传递字符串可能导致性能损失，因此不建议以字符串作为第一个参数, 直接传入函数为佳。

第二个参数是一个表示等待多长时间的毫秒数，但经过该时间后指定的代码不一定会执行。

JavaScript 是一个单线程序的解释器，因此一定时间内只能执行一段代码。为了控制要执行的代码，就有一个 JavaScript 任务队列。这些任务会按照将它们添加到队列的顺序执行。setTimeout()的第二个参数告诉 JavaScript 再过多长时间把当前任务添加到队列中。如果队列是空的，那么添加的代码会立即执行；如果队列不是空的，那么它就要等前面的代码执行完了以后再执行。

setInterval:

setInterval用法和setTimeout类似, 但是它更耗性能, 前面说了, 每一次执行, 不能保证在约定的时间立即执行. 所以用setInterval来实现定时执行并不是一个理想的选择, 我们通过setTimeout来模拟:

var num = 0;
var max = 10;
function _setInterval(){
  var _fn = arguments.callee;
  setTimeout(function(){
    num++;
    console.log(num);
    if(num<max){
      _fn()
    }else{
      console.log('循环结束')
    }
  },500)
}

系统对话框

常见的方法如下:

• alert
• prompt
• confirm

不过根据潮流发展, 现在的开发人员更倾向通过重写Div来模拟以上系统对话框.

location对象

多用于跳转, 和获取参数, 注意参数的编码解码问题, 不再讲解

navigator对象

通常我们使用这个对象用于跳转, 和识别UA, 不再讲解

screen对象

使用频率最低的对象之一, 故不再讲解

history对象

history 对象保存若用户上网的历史记录，从窗口被打开的那一刻算起。因为 history 是 window对象的属性，因此每个浏览器窗口、每个标签页乃至每个框架，都有自已的 history 对象与特定的window 对象关联。出于安全方面的考虑，开发人员无法得知用户浏览过的 URL。

以下是常用的几个方法和属性:

• go: 常见参数:-1,1(对应下面的back, forward)
• back: 后退(用于模拟浏览器的后退按钮)
• forward: 前进(用于模拟浏览器的前进按钮)
• length:记录访问页面的数量

本章完