JS红皮书读书笔记-08-BOM

TOC
  1. 1. window对象
    1. 1.1. 全局作用域
    2. 1.2. 窗口关系和框架
    3. 1.3. 窗口位置
    4. 1.4. 窗口大小
    5. 1.5. 导航和打开窗口
    6. 1.6. setTimeout和setInterval
    7. 1.7. 系统对话框
  2. 2. location对象
  3. 3. navigator对象
  4. 4. screen对象
  5. 5. history对象

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对象

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

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

screen对象

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

history对象

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

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

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

本章完

访客评论