《JavaScript高级程序设计》BOM
1、window对象
BOM的核心是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的一个Global对象。
全局作用域
所有在全局作用域中声明的变量和函数都会变成window对象都属性和方法。
var age = 21;
function sayAge(){
alert(this.age);
}
alert(window.age); //21
sayAge(); //21
window.sayAge(); //21窗口大小
//取得页面视口大小
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;
}
}弹出窗口屏蔽
如果是浏览器扩展或其他程序阻止都弹出窗口，那么window.open()通畅会抛出一个错误。因此，药箱准确都检测出弹出窗口是否被屏蔽，必须在检测返回值都同时，将对window.open()的调用封装在一个try-catch块中。
var blocked = false;
try{
var wroWin = window.open("http://www.wrox.com","_blank");
if(wroWin == null){
blocked = true;
}
} catch(ex){
blocked = true;
}
if(blocked){
alert("The popup was blocked.");
}间歇调用和超时调用
javascript是单线程语言，但它允许通过设置超时值(在指定的时间后执行代码)和间歇值(每隔指定的时间就执行一次代码)来调度代码在特定的时刻运行。
//设置超时调用
var timeoutId = setTimeout(function(){
alert("Hello World.");
},1000);
//把它取消
clearTimeout(timeoutId);
//设置间歇调用
var num;
var max = 10;
var intervalId = null;
function incrementNumber(){
num++;
//如果执行次数达到了max，则取消后续未执行的调用
if(num == max){
clearInterval(intervalId);
alert("Done");
}
//这个模式也可以用超时调用来实现
//如果执行次数未达到max，则设置另一次超时调用
if(num < max){
setTimeout(incrementNumber,500);
} else {
alert("Done");
}
}
intervalId = setInterval(incrementNumber,500);
setTimeout(incrementNumber,500);系统对话框
包含三个方法：alert(),confirm()和prompt()。
//alert 打印一个警告框
alert("Hehe");
//confirm()
if(confirm("are you sure?")){
alert("Yes");
} else {
alert("No");
}
//prompt()
var result = prompt("what is your name?","");
if(result != null){
alert("wlecome, "+result);
}2、location对象
location是最有用的BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还有一些导航信息和将URL解析为独立的片段，让开发人员可以通过不同的属性访问这些片段。
| 属性名 | 例子 | 说明 |
|---|---|---|
| hash | “#contents” | 返回URL中的hash |
| host | “wwww.wrox.com:80” | 返回服务器名称和端口 |
| hostname | “www.wrox.com” | 返回不带端口号的服务器名称 |
| href | “http://www.wrox.com” | 返回加载页面的完整URL |
| pathname | “/WileyCDA/” | 返回URL中的目录和文件名 |
| port | “8080” | 返回URL中指定的端口号 |
| protocol | “http:” | 返回页面使用的协议 |
| search | “?q=javascript” | 返回URL查询的字符串 |
每次修改location的属性(hash除外)，页面都会以新URL重新加载。
查询字符串参数
location.search返回从问号到URL末尾到所有内容，但却没有办法逐个访问其中但每个查询字符串参数。我们可以创建一个函数，用以解析查询字符串，然后返回包含所有参数的一个对象。
function getQueryStringArgs(){
//取得查询字符串并去掉开头的问号
var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
//保存数据的对象
args = {},
//取得每一项
items = qs.length ? qs.spilt("&") : [],
item = null,
name = null,
value = null,
i = 0,
len = items.length;
//逐个将每一项添加到args对象中
for(i=0;i"="];
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if(name.length){
args[name] = value;
}
}
return args;
}
//使用示例
//假设查询字符串是?q=javascript&num=10
var args = getQueryStringArgs();
alert(args["q"]); //"javascript"
alert(args["num"]); //"10" 位置操作
使用location对象可以通过很多方式来改变浏览器的位置，最常用的方法是assign(),
location.assign("http://www.wrox.com");
//下面两行代码与显示调用assign()方法的效果完全一样
window.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";当通过修改location对象的属性修改URL时，浏览器的历史记录中就会生成一条新记录，因此单击“后退”按钮都会导航到前一个页面,可以通过replace()方法禁用这种行为。
<html>
<head>
<title>testtitle>
head>
<body>
<script>
setTimeout(function(){
location.replace("http://www.wrox.com");
},1000);
script>
body>
html>如果将上面这个页面加载到浏览器中，1秒之后会重新定向到www.wrox.com，“后退”按钮处于禁用状态。还有一个方法与位置有关：reload()，作用是重新加载当前页面。
location.reload(); //重新加载(可能从缓存中加载)
location.reload(true); //重新加载(从服务器重新加载)3、navigator对象
navigator对象用于识别客户端的浏览器
检测插件
//检测所有浏览器中的flash
function hasFlash(){
var result = hasPlugin("Flash");
if(!result){
result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
}
return result;
}
//检测所有浏览器中的QuickTime
function hasQuickTime(){
var result = hasPlugin("QuickTime");
if(!result){
result = hasIEPlugin("QuickTime.QuickTime");
}
return result;
}注册处理程序
HTML5中为navigator对象新增了两个方法，registerContentHandler()和registerProtocolHandler()。
4、history对象
history对象保存着用户上网的历史记录，同时它也是window对象的属性。
//后退一页
history.go(-1);
history.back();
//前进一页
history.go(1);
history.forward();
//前进两页
history.go(2);
//跳转到最近到wrox.com
history.go("wrox.com");
//length属性
if(history.length == 0){
//这是用户打开窗口的第一个页面
}