javascript高级编程(第三版) 07_BOM

window 对象

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

全局作用域

Global{
window:Global
}

全局变量会成为 window 对象的属性，定义全局变量与在 window 对象上直接定义属性还 是有一点差别：全局变量不能通过 delete 操作符删除，而直接在 window 对象上的定义的属性可以

delete window.color

窗口关系及框架

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

在使用框架的情况下，浏览器中会存在多个 Global 对象。在每个框架中定义的 全局变量会自动成为框架中 window 对象的属性。由于每个 window 对象都包含原生 类型的构造函数，因此每个框架都有一套自己的构造函数，这些构造函数一一对应， 但并不相等。例如，top.Object 并不等于 top.frames[0].Object。这个问题会 影响到对跨框架传递的对象使用 instanceof 操作符。

窗口位置

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

moveTo()接收的是新位置的 x 和 y 坐标值，而 moveBy()接收的是在水平和垂直方向上移动的像素数

窗口大小

innerWidth、innerHeight、outerWidth 和 outerHeight

取得页面视图得大小
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;
}
}
使用 resizeTo()和 resizeBy()方法可以调整浏览器窗口的大小
resizeTo()接收浏览器窗口的新宽度和新高度，而 resizeBy()接收新窗口与原窗口的宽 度和高度之差

导航和打开窗口

window.open()方法既可以导航到一个特定的 URL，也可以打开一个新的浏览器窗口
接收 4 个参数：要加载的 URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览 器历史记录中当前加载页面的布尔值

间歇调用和超时调用

JavaScript 是单线程语言，但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。
//推荐的调用方式
setTimeout(function() {
alert(“Hello world!”);
}, 1000);
为了控制要执行的代码，就 有一个 JavaScript 任务队列。这些任务会按照将它们添加到队列的顺序执行。
setTimeout()的第二个 参数告诉 JavaScript 再过多长时间把当前任务添加到队列中。如果队列是空的，
那么添加的代码会立即 执行；如果队列不是空的，那么它就要等前面的代码执行完了以后再执行。

调用 setTimeout()之后，该方法会返回一个数值 ID，表示超时调用。这个超时调用 ID 是计划执
行代码的唯一标识符，可以通过它来取消超时调用。要取消尚未执行的超时调用计划，可以调用
clearTimeout()方法并将相应的超时调用 ID 作为参数传递给它，

//设置超时调用
var timeoutId = setTimeout(function() {
alert(“Hello world!”);
}, 1000);
//注意：把它取消
clearTimeout(timeoutId);

设置间歇调用的方法是 setInterval()，它接受的参数与 setTimeout()相同

var num = 0;
var max = 10;
var intervalId = null;
function incrementNumber() {
num++;
//如果执行次数达到了 max 设定的值，则取消后续尚未执行的调用
if (num == max) {
clearInterval(intervalId);
alert(“Done”);
}
}
intervalId = setInterval(incrementNumber, 500);

系统对话框

浏览器通过 alert()、confirm()和 prompt()方法可以调用系统对话框向用户显示消息。

通过这几个方法打开的对话框都是同步和模态的。也就是说，显示这 些对话框的时候代码会停止执行，而关掉这些对话框后代码又会恢复执行。

可以检查 confirm()方法返回的布尔值：true 表示单击 了 OK，false 表示单击了 Cancel 或单击了右上角的 X 按钮

prompt()方法
prompt()方法接受两个参数：要显示给用户的文本提示和文本输入域的默认值

location对象

location 对象是很特别的一个对象，因为它既是 window 对象的属性，也是 document 对象的属性；换句话说，window.location 和 document.location 引用的是同一个对象。
location 对象的用处不只表现在它保存着当前文档的信息，还表现在它将 URL 解析为独立的片段，让 开发人员可以通过不同的属性访问这些片段

查询字符串参数

function getQueryStringArgs(){
//取得查询字符串并去掉开头的问号
var qs = (location.search.length > 0 ? location.search.substring(1) : “”),

//保存数据的对象
args = {},

//取得每一项
items = qs.length ? qs.split("&") : [],
item = null,
name = null,
value = null,
//在 for 循环中使用
i = 0,
len = items.length;
//逐个将每一项添加到 args 对象中
for (i=0; i < len; i++){
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if (name.length) {
args[name] = value;
}
}

return args;
}

位置操作

使用 assign()方法并为其传递一个 URL
这样，就可以立即打开新 URL 并在浏览器的历史记录中生成一条记录。如果是将 location.href 或 window.location 设置为一个 URL 值，也会以该值调用 assign()方法。
效果相同

navigator对象

属性通常用于检测显示网页得浏览器类型

检测插件

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

//检测插件（在 IE 中无效）
function hasPlugin(name){
name = name.toLowerCase();
for (var i=0; i < navigator.plugins.length; i++){
if (navigator. plugins [i].name.toLowerCase().indexOf(name) > -1){
return true;
}
}
return false;
}
//检测 Flash
alert(hasPlugin(“Flash”));
//检测 QuickTime
alert(hasPlugin(“QuickTime”));

IE检测 …

注册处理程序

screen对象

screen 对象基本上只 用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等

history 对象

history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。因为 history 是 window
对象的属性，因此每个浏览器窗口、每个标签页乃至每个框架，都有自己的 history 对象与特定的 window 对象关联
//后退一页
history.go(-1);
//前进一页
history.go(1);
//前进两页
history.go(2);
也可以给 go()方法传递一个字符串参数，此时浏览器会跳转到历史记录中包含该字符串的第一个
位置——可能后退，也可能前进，具体要看哪个位置最近。如果历史记录中不包含该字符串，那么这个
方法什么也不做，例如：
//跳转到最近的 wrox.com 页面
history.go(“wrox.com”);
//跳转到最近的 nczonline.net 页面
history.go(“nczonline.net”);
//后退一页
history.back();
//前进一页
history.forward();
history 对象还有一个 length 属性，保存着历史记录的数量。这个数量 包括所有历史记录，即所有向后和向前的记录。对于加载到窗口、标签页或框架中的第一个页面而言， history.length 等于 0

小结

浏览器对象模型（BOM）以 window 对象为依托，表示浏览器窗口以及页面可见区域。同时，window
对象还是 ECMAScript 中的 Global 对象，因而所有全局变量和函数都是它的属性，且所有原生的构造
函数及其他函数也都存在于它的命名空间下。本章讨论了下列 BOM 的组成部分。
 在使用框架时，每个框架都有自己的 window 对象以及所有原生构造函数及其他函数的副本。 每个框架都保存在 frames 集合中，可以通过位置或通过名称来访问。
 有一些窗口指针，可以用来引用其他框架，包括父框架。
 top 对象始终指向最外围的框架，也就是整个浏览器窗口。
 parent 对象表示包含当前框架的框架，而 self 对象则回指 window。  使用 location 对象可以通过编程方式来访问浏览器的导航系统。设置相应的属性，可以逐段
或整体性地修改浏览器的 URL。  调用 replace()方法可以导航到一个新 URL，同时该 URL 会替换浏览器历史记录中当前显示
的页面。
 navigator 对象提供了与浏览器有关的信息。到底提供哪些信息，很大程度上取决于用户的浏
览器；不过，也有一些公共的属性（如 userAgent）存在于所有浏览器中。
BOM 中还有两个对象：screen 和 history，但它们的功能有限。screen 对象中保存着与客户端
显示器有关的信息，这些信息一般只用于站点分析。history 对象为访问浏览器的历史记录开了一个
小缝隙，开发人员可以据此判断历史记录的数量，也可以在历史记录中向后或向前导航到任意页面。