javascript--8BOM

：Window对象
1.window:既是通过JavaScript访问浏览器的一个接口，又是ECMAScript规定的Global对象
    2.使用var语句添加的window属性有一个名为[[configurable]]的特性，这个特性值被设置为false,因此这样定义的属性不可以
       通过delete操作符删除。IE8及更早版本在遇到delete删除window属性时会报错
HTML 代码


12345678
var age = 29;
window.color = "red";
//在IE<9时报错，在其他浏览器中返回false
delete window.age;
//在IE<9时报错，在其他浏览器中返回true
delete window.color;
    3.尝试访问未声明的变量会抛出错误，但是通过产销window对象可以知道某个可能未生命的变量是否存在
HTML 代码


123456
//报错，因为oldValue未定义
var newValue = oldValue;
//这里不会抛出错误，因为这是一次属性查询
//newValue的值是undefined
var newValue = window.oldValue;
     4.窗口位置:IE,Safari,Opera和Chrome都提供screenLeft和screenTop属性，分别表示窗口相对于屏幕左边和上边的位置。FireFox

        则在screenX和screenY属性中提供相同的窗口位置信息，safari和Chrome也同时支持这两个属性。Opera虽然也支持screenX和
        screenY属性，但与screenLeft和screenTop属性并不对应。因此建议不要在Opera中使用它们
HTML 代码


123
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
      5.窗口大小:outerWidth和outerHeight返回浏览器窗口本身的尺寸;innerWidth和innerHeight则表示该容器中页面视图区的大小(减去边框宽度)
         document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面适口的信息(可见区域大小)，在IE6中，这些属性必须
         在标准模式下才有效，如果是混杂模式则要使用:document.body.clientWidth和document.body.clientHeight获得
         document.body.offsetWidth/offsetHeight:网页可见区域大小(包括边线和滚动条的宽)         document.body.scrollWidth/scrollHeight:网页正文的宽高
         document.body.scrollTop/scrollLeft:滚动条滚动的距离

      6.间歇调用和超时调用：JavaScript是单线程语言，但它允许通过设置超时值和间歇时间值来调度代码在特定时刻执行
HTML 代码


123456789101112131415
//不建议传递字符串，第二个参数是毫秒
setTimeOut("alert('Hello World')",1000)
//推荐的调用方式
setTimeout(function(){alert("Hello world")},1000)
//设置超时调用,setTimeout()返回一个数值ID,超时调用的代码都是在全局作用域中执行的，因此函数中的this的值在非严格模式下指向window对象，在严格模式下是undefined
var timeoutId = setTimeout(function(){},1000)
//取消
clearTimeout(timeoutId)
//间歇调用与超时调用类似，只不过按指定的时间间隔重复执行代码
var intervalId = setInterval(function(){},1000);
//清除
clearInterval(intervalId);

        7.location对象:是最有用的BOM对象之一，提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。
          它既是window对象的属性，又是document对象的属性,即window.location和document.location引用同一个对象
HTML 代码


1234567891011121314
//打开新URL并在浏览器的历史记录中生成一条记录
location.assign("http://www.g.cn")；
//如果将location.href或window.location设置为一个URL值，也会以该值调用assign方法：
window.location="http://www.g.cn";
location.href="http://www.g.cn";//和直接调用assign()方法一样
//每次修改location的属性(hash除外)，页面都会以新URL重新加载
//通过上述任何一种方法修改URL之后，浏览器的历史记录中介会生成一条新记录,因此用户通过单击“后退”按钮导航到前一个页面，要禁止这种行为，可以使用replace()方法：
location.replace("http://www.g.cn");
//reload:如果页面自上次请求以来并没有改变过，页面就会从浏览器缓存中重新加载。
location.reload();//重新加载(有可能从缓存中加载)
location.reload(true);//重新加载(从服务器重新加载)

        7.navigator对象:通常用于检测显示网页的浏览器类型(appVersion,language,plugins,uerAgent, etc.)
        8.history对

HTML 代码


12345678910
//后退一页
history.go(-1);
//前进一页
history.go(1);
//前进两个
history.go(2);
//跳转到最近的wrox.com页面
history.go("wrox.com");
//也可以使用back()和forward()代替go()
//history.length返回所有向后和先前的记录数

、window对象
1.作为Global
（1）window有双重身份，一是js访问浏览器的一个接口，二是ECMAScript的Global对象。
（2）window作为Global，在全局作用域声明的变量、函数都是window对象的属性和方法。定义全局变量和定义window属性是有区别的：定义的window属性，可以用delete删掉，这和其他对象一致；定义的全局变量则不能。还有一个区别，尝试使用未定义的全局变量会抛错，而尝试使用window对象上未定义的属性，最多是undefined。
2.window对象常用属性
（1）window.frames：当页面中存在frame或iframe时，这些frame各自的window对象，都存储在顶级页面的window.frame中，可以通过索引号或frame的name属性迭代。但是最好不要用window.frames["myframe"]去访问，容易引起误解，可以使用top，即top.frames["myframe"]，页面中，top总是代表最顶级的window对象。
（2）window.parent：在frame中载入的页面，它的window对象的parent属性指向父级页面的window对象；顶级页面中window的parent指向top，也就是window自身。
（3）window.screenLeft/Top或window.screenX/Y：表示浏览器窗口左上角（窗口标题栏左上角）在桌面中的位置。
（4）window.innerWidth/Height和window.outerWidth/Height：前者表示我们可以使用的页面（不是body，是装body的视图容器）的大小；后者表示浏览器整个大小，包括标题栏、状态栏、菜单栏等。也可以通过document.body.clientWidth/Height获得视图容器大小，根据浏览器而定。
3.window对象常用方法
（1）window.open()：弹出窗口，为了安全，只在用户单击时才能弹出，其他触发不能弹出。
（2）window.setTimeout(func,time)和window.setInterval(func,time)：超时调用和间歇调用。用处很广泛了，这里不细展开，只提醒一点，这两个方法回调函数时，那些函数的this都指的是window。
（3）window.alert(str)：只有一个确定按钮的警告。
（4）window.confirm(str)：有一个确定按钮和一个取消按钮的提示，所以confirm会返回一个boolean，用于表示点击了啥。
（5）window.prompt(title,str)：有一个确定一个取消，一个input的输入提示，返回字符串。
（6）window.print()：打印页面。
二、location对象
1.location的引用
（1）location比较特殊的地方是，它既是window的对象，也是document的对象，可以通过window.location或document.location使用。
（2）在下面的说明中，我们使用这个URL，http://blog.csdn.net:80/lbxx1984/index.html?123
2.location属性
（1）href：返回地址栏中所有内容，http://blog.csdn.net:80/lbxx1984/index.html?123；
（2）protocol：返回当前页面的协议，http:；
（3）host：返回服务器名称和端口号，blog.csdn.net:80；
（4）hostname：返回服务器名称，blog.csdn.net；
（5）port：返回端口号，80；
（6）pathname：返回目录和文件名，/lbxx1984/index.html；
（7）hash：返回URL中的散列串，以#开头，例子中没有；
（8）search：返回URL中的查询串，以?开头，?123。
3.location方法
（1）location.assign(url)：当前页面跳转到url，并在浏览器历史记录中生成一条新记录。等同于window.location=url或location.href=url，第三种最常用。其实只要修改location的属性（hash属性除外），页面就会以新的url重新加载。
（2）location.replace(url)：也是页面跳转，和assign的区别是不在浏览器记录中生成一条新记录，也就是不能使用后退键回到之前的页面。
（3）location.reload(boolean)：从新加载页面。如果传入true，就是从服务器重新加载，而不是从本地缓存加载。
三、其他对象
1、navigator对象
（1）navigator属性中包含了浏览器信息、浏览器配置、少数机器信息等。但浏览器对它的兼容性不是很好。
（2）navigator.plugins[]：非IE浏览器用这个数组存放插件。可以用来检查是否安装了某个插件。
2、screen对象
（1）用处不大，包含了显示器的信息。兼容性也不好。
3.history对象
（1）用来控制页面前进和后提。传入正值前进，传入负值后退，传入网址是跳转到最近的记录，可能前进也可能后退。
四、客户端检测
1.能力检测
（1）能力检测不是识别浏览器的版本，而是识别浏览器能做什么，不能做什么。比如if(document.addEventListener){return true;}可以查看浏览器支持不支持addEventListener方法绑定事件。
（2）能力检测要注意检测顺序，想使用哪个功能，就先检测哪个功能，然后再检测备用功能；能力检测不存在替代性，也就是支持一种能力，未必支持另一种能力。比如检测到这个版本IE支持addEventListener，然后认为这个IE还支持WebGL，那就错了。
（3）能力检测了解某个特性能否按想要的方式工作，比了解某个特性是否存在更重要。比如if(typeof document.addEventListener =="function"){return true;}就比（1）中的检测方法更好。
2.怪癖检测
（1）怪癖检测不是识别浏览器能不能做什么，而是识别浏览器存在什么缺陷（bug），以确定某一特征不能正常工作。比如IE8，自定义的实例属性，如果与原型中不能枚举的属性同名，那么这个实例属性也不能被枚举。
3.用户代理检测
（1）使用navigator.userAgent来检测浏览器的实际版本。这是一种迫不得已的方法，使用优先级低于前两种。但有些浏览器会通过电子欺骗，来扰乱这一功能。
（2）有时候，获取浏览器的引擎比获取浏览器的版本更有效。因为把开源引擎拿来开发浏览器的厂商太多了。比如基于webkit呈现引擎的safari和chrome，在显示上基本是一致的，但两者使用了不同的javascript引擎，运行速度上有差别。chrome使用的v8引擎号称当前最快的js引擎。

document对象
document对象实际上是window对象的属性。
这个对象的独特之处是它是唯一一个既属于BOM又属于DOM的对象。
从BOM角度看，document对象由一系列集合构成，这些集合可以访问文档的各个部分，并提供页面自身的信息。再有，由于BOM没有可以指导实现的标准，所以每个浏览器实现的document对象都稍有不同，这一节的重点是最常用的功能。
BOM的document对象的一些通用属性：
属性  说明
alinkColor 激活的链接的颜色，如<body alink="color">定义的*
bgColor  页面的背景颜色，如<body bgcolor="color">定义的*
fgColor  页面的文本颜色，如<body text="color">定义的*
lastModified 最后修改页面的日期，是字符串
linkColor 链接的颜色，如<body link="color">定义的*
referrer 浏览器历史中后退一个位置的URL
title  <title/>标签中显示的文本
URL  当前载入的页面的URL，或者设置新的URL，把窗口导航到新页面
vlinkColor 访问过的链接的颜色，如<body vlink="color">定义的*
* 反对使用这些属性，因为它们引用了<body/>标签中的旧HTML特性。应该用样式表脚本代替它们。
document对象也有许多集合，提供对载入的页面的各个部分的访问。
集合  说明
anchors  页面中所有锚的集合（由<a name="anchorname"></a>表示）
applets  页面中所有applet的集合
embeds  页面中所有嵌入式对象的集合（由<embed/>标签表示）
forms  页面中所有表单的集合
images  页面中所有图像的集合
links  页面中所有链接的集合（由<a href="somewhere.htm"><a/>表示）
可用数字或名字引用document对象的每个集合，也就是说可用document.images[0]或document.images["image_name"]访问图像。
此外，链接和图像等的所有特性都变成了该对象的属性。
例如：
document.images[0].src 获取第一个图像的src特性的代码。
BOM的document对象还有几个方法。
write()方法或writeln()方法。
这两个方法都接受一个参数，即要写入文档的字符串。
它们之间唯一的区别是writeln()方法将在字符串末尾加一个换行符（/n）。
这两个方法都会把字符串的内容插入到调用它们的位置。这样浏览器就会像处理页面中的常规HTML代码一样处理这个文档字符串。
例如：
document.write("<p>hello</p>");
可以使用这种功能动态地引入外部JavaScript文件。
例如：
<script type="text/javascript">
document.write("<script type=/"text/javascript/" src=/"web.js/"></scr"+"ipt>");
</script>
这段代码在页面上写了一个<script/>标签，将使浏览器像常规一样载入外部JavaScript文件。
注意：字符串"</script>"被分成两部分（"</src"和"ipt>"）。这是必要的，因为每当浏览器遇到</script>，它都假定其中的代码块是完整的（即使它出现在JavaScript字符串中）。
例如：
<script type="text/javascript">
document.write("<script type=/"text/javascript/" src=/"web.js/"></script>");
</script>
浏览器显示如下网页：
<script type="text/javascript">
document.write("<script type=/"text/javascript/" src=/"web.js/">
</script>
</script>
可以看到，忘记把字符串"</script>"分成两部分引起了严重的混乱。首先，在<script/>标签内有个语法错，因为document.write()的调用漏掉了闭括号。其次，有两个</script>标签。这就是在使用document.write()方法把<script/>标签写入页面时一定要把"</script>"字符串分开的原因。
注意，要插入内容属性，必须在完全载入页面前调用write()和writeln()方法。如果任何一个方法是在页面载入后调用的，它将抹去原来页面的所有内容，显示指定的内容。

与write()和writeln()方法密切相关的是open()和close()方法。
open()方法用于打开已经载入的文档以便进行编写
close()方法用于关闭open()方法打开的文档，本质上显示写入其中的所有内容。
通常把这些方法结合在一起，用于向框架或新打开的窗口中写入内容
例如：
var oNewWin = window.open("about:blank","NewWin");
oNewWin.document.open();
oNewWin.document.write("hello");
oNewWin.document.close();
这个例子打开空白页（使用"about:blank"），然后写入新页面。要正确实现这一操作，在调用write()前，先调用open()方法。写完后，调用close()方法完成显示。
当你想显示无需返回服务器的页面时，这种方法非常有用。
 
location对象
BOM中最有用的对象之一是location对象，它是window对象和document对象的属性（对此没有什么标准，导致了一些混乱）。
location对象表示载入窗口的URL，此外，它还可以解析URL：
hash
如果URL包含#，该方法将返回该符号之后的内容
例如，index.htm#selection1的hash等于"#selection1"）。
host
服务器的名字（如www.wrox.com）。
hostname
通常等于host，有时会省略前面的www。
href
当前载入的页面的完整URL。
pathname
URL中主机名后的部分
例如，http://www.abc.com/pictures/index.htm的pathname是"/pictures/index.htm"。
port
URL中声明的请求的端口。默认情况下，大多数URL没有端口信息，所以该属性通常是空白的。
例如，http://www.somewhere.com:8080/index.htm这样的URL的port属性等于8080。
protocol
URL中使用的协议，即双斜杠（//）之前的部分。
例如，http://www.wrox.com中的protocol属性等于http:
search
执行GET请求的URL中的问号（?）后的部分，又称为查询字符串。
例如，search.htm?term=javascript中的search属性等于?term=javascript
location.href是最常用的属性，用于获取或设置窗口的URL（在这一点上，它类似于document.URL属性）。改变该属性的值，就可导航到新页面。
例如：
location.href = "web.htm";
采用这种方式导航，新地址将被加到浏览器的历史栈中，放在前一个页面后，意味着Back按钮会导航到调用了该属性的页面。
assign()方法实现的是同样的操作
例如：
location.assign("web.htm");
replace()方法的操作与assign()方法，但不能从浏览器历史中访问它。
例如：
location.replace("web.htm");
reload()方法，可重新载入当前页面。
reload()方法有两种模式，即从浏览器缓存中重载，或从服务器端重载。
究竟采用哪种模式由该方法的参数值决定，如果是false，则从缓存中载入，如果是true，则从服务器端载入（默认值为false）。
例如：
location.replace(true); //从服务器端载入
注意：reload()方法调用后的代码可能被执行，也可能不被执行，这由网络延迟和系统资源等因素决定。因此，最好把reload()调用放在最后一行。
toString()方法，返回location.href的值。
例如：
alert(location.toString());

注意，location对象是window对象和document对象的属性，所以window.location和document.location互相等价，可以交换使用。
 
navigator对象
navigator对象是最早实现的BOM对象之一，它包含大量有关Web浏览器的信息。它也是window对象的属性，可以用window.navigator引用它，也可以用navigator引用。
同样，缺乏标准阻碍了navigator对象的发展，因为各个浏览器决定支持该对象的属性和方法。下表列出了最常用的属性和方法以及最常用的四种浏览器（IE、Mozilla、Opera和Safari）中哪个支持它们。
属性/方法 说明
appCodeName 浏览器代码名的字符串表示（如"Mozilla"）
appName  官方浏览器名的字符串表示
appMinorVersion 额外版本信息的字符串表示
appVersion 浏览器版本信息的字符串表示
browserLanguage*浏览器或操作系统的语言的字符串表示
cookieEnabled 说明是否启用了cookie的Boolean值
cpuClassCPU 类别的字符串表示（"x86"、"68K"、"Alpha"、"PPC"或"other"）
javaEnabled() 说明是否启用了Java的Boolean值
language 浏览器语言的字符串表示
mimeTypes 注册到浏览器的mime类型的数组
onLine  说明浏览器是否连接到因特网上的Boolean值
oscpu  操作系统或CPU的字符串表示
platform 运行浏览器的计算机平台的字符串表示
plugins  安装在浏览器中的插件的数组
preference() 用于设置浏览器首选项的函数
product  产品名的字符串表示（如"Gecko"）
productSub 有关产品的额外信息的字符串表示（如Gecko版本）
opsProfile
securityPolicy
systemLanguage* 操作系统语言的字符串表示
taintEnabled() 说明是否启用了数据感染的Boolean值
userAgent 用户代理头字符串的字符串表示
userLanuage* 操作系统语言的字符串表示
userProfile 允许访问浏览器用户档案的对象
vendor  品牌浏览器名的字符串表示（如"Netscape6"或"Netscape"）
vendorSub 品牌浏览器的额外信息的字符串表示（如Netscape的版本）
* 大多数情况下，browserLanguage、systemLanguage和userLanguage相同。
在判断浏览器页面采用的是哪种浏览器方面时，navigator对象非常有用。在因特网上可迅速检索到许多检测浏览器的方法，它们都大量地利用了navigator对象。
 
screen对象
用screen对象获取某些关于用户屏幕的信息。
screen对象通常包含下列属性（不过，许多浏览器都加入了自己的属性）：
availHeight
窗口可以使用的屏幕的高度（以像素计），其中包括操作系统元素（如Windows工具栏）需要的空间。
availWidth
窗口可以使用的屏幕的宽度（以像素计）。
colorDepth
用户表示颜色的位数。大多数系统采用32位。
height
屏幕的高度，以像素计。
width
屏幕的宽度，以像素计。
可以跟window方法配合使用：
window.resizeTo(screen.availWidth, screen.availHeight);

BOM
它提供了独立于内容而与浏览器窗口进行交互的对象。
window对象是整个BOM的核心，所有对象和集合都以某种方式回接到window对象。

window对象
window对象表示整个浏览器窗口，但不必表示其中包含的内容。此外，window还可用于移动或调整它表示的浏览器的大小，或者对它产生其他影响。
如果页面使用框架集合，每个框架都由它自己的window对象表示，存放在frames集合中。在frames集合中，可用数字（由0开始，从左到右，逐行的）或名字对框架进行索引。
可以用window. frames[0]或window.frames["Framename"]引用框架，也可以用top对象代替window对象引用这些框架（例如top.frames[0]）。
top对象指向的都是最顶层的（最外层的）框架，即浏览器窗口自身。
这可以确保指向正确的框架。此后，如果在框架内编写代码，其中引用的window对象就只是指向该框架的指针。
window对象不需要明确引用它
在引用函数、对象或集合时，解释程序都会查看window对象，所以window.frames[0]可以只写作frame[0]。
可以直接用框架的名字访问它，如window.leftFrame。不过frames集合更常用，因为它能确切地表示出代码的意图。
window另一个实例是parent。
parent对象指向所在框架的父框架
parent对象与装载文件的框架集一起使用，要装载的文件也是框架集。
浏览器窗口自身被看作所有顶层框架的父框架。
一个更加全局化的窗口指针是self，它总是等于window
如果页面上没有框架，window和self就等于top，frames集合的长度为0。
还可以连锁引用window，例如parent.parent.frames["topFrame"]，不过通常不赞成使用这种形式，因为框架结构的任何改变都会造成代码错误。

1. 窗口操作
moveBy(dx,dy)
把浏览器窗口相对当前位置水平移动dx个像素，垂直移动dy个像素。
dx值为负数，向左移动窗口，dy值为负数，向上移动窗口。
moveTo(x,y)
移动浏览器窗口，使它的左上角位于用户屏幕的(x,y)处。
可以使用负数，不过这样会把部分窗口移出屏幕的可视区域。
resizeBy(dw,dh)
相对于浏览器窗口的当前大小，把它口的宽度调整dw个像素，高度调整dy个像素。
dw为负数，把缩小窗口的宽度，dy为负数，缩小窗口的高度。
resizeTo(w,h)
把窗口的宽度调整为w，高度调整为h。不能使用负数。
窗口在屏幕上的位置以及它的尺寸。由于缺乏相应的标准，就产生了问题。
IE提供了window.screenLeft和window.screenTop对象来判断窗口的位置，但未提供任何判断窗口大小的方法。用document.body.offsetWidth和document.body. offsetHeight属性可以获取视口的大小（显示HTML页的区域），但它们不是标准属性。
Mozilla提供window.screenX和window.screenY属性判断窗口的位置。它还提供了window.innerWidth和window.innerHeight属性来判断视口的大小，window.outerWidth和window.outerHeight属性判断浏览器窗口自身的大小。
Opera和Safari提供与Mozilla相同的工具。

2. 导航和打开新窗口
用JavaScript可以导航到指定的URL，并用window.open()方法打开新窗口。
该方法接受四个参数，即要载入新窗口的页面的URL、新窗口的名字（为目标所用）、特性字符串和说明是否用新载入的页面替换当前载入的页面的Boolean值。
一般只用前三个参数，因为最后一个参数只有在调用window.open()方法却不打开新窗口时才有效。
如果用已有框架的名字作为window.open()方法的第二个参数调用它，那么URL所指的页面就会被载入该框架。
例如：
window.open("web.html","topFrame"); //把页面载入名为“topFrame”的框架
这行代码的行为就像用户点击一个链接，该链接的href为web.html，target为"topFrame"。专用的框架名_self、_parent、_top和_blank也是有效的。url为"about:blank"是新建一个页面。
如果声明的框架名无效，window.open()将打开新窗口，该窗口的特性由第三个参数（特性字符串）决定。如果省略第三个参数，将打开新的浏览器窗口，就像点击了target被设置为_blank的链接。这意味着新浏览器窗口的设置与默认浏览器窗口的设置（工具栏、地址栏和状态栏都是可见的）完全一样。
如果使用第三个参数，该方法就假设应该打开新窗口。特性字符串是用逗号分隔的设置列表，它定义新创建的窗口的某些方面。下表显示了各种设置：
设置 值 说明
left Number 说明新创建的窗口的左坐标。不能为负数*
top Number 说明新创建的窗口的上坐标。不能为负数*
height Number 设置新创建的窗口的高度。该数字不能小于100*
width Number 设置新创建的窗口的宽度。该数字不能小于100*
resizable yes,no 判断新窗口是否能通过拖动边线调整大小。默认值是no
scrollable yes,no 判断新窗口的视口容不下要显示的内容时是否允许滚动。默认值是no
toolbar yes,no 判断新窗口是否显示工具栏。默认值是no
status yes,no 判断新窗口是否显示状态栏。默认值是no
location yes,no 判断新窗口是否显示（Web）地址栏。默认值是no
如前所述，特性字符串是用逗号分隔的，因此在逗号或等号前后不能有空格。
window.open()方法将返回window对象作为它的函数值，该window对象就是新创建的窗口（如果给定的名字是已有的框架名，则为框架）。用这个对象，可以操作新创建的窗口：
例如：
var oNewWin = window.open("web.html","topFrame","top=10,left=10");
oNewWin.resizeTo(100,100);
调用close()方法关闭新创建的窗口：
oNewWin.close();
如果新创建的窗口中有代码，还可以用下面的代码关闭其自身：
window.close();
如果在主浏览器窗口中调用window.close()方法，将得到一条消息：提示该脚本试图关闭窗口，询问是否真的要关闭该窗口。通用规则是，脚本可以关闭它们打开的任何窗口，但不能关闭其他窗口。
新窗口还有对打开它的窗口的引用，存放在opener属性中。
只在新窗口的最高层window对象才有opener属性，这样用top.opener访问它会更安全。
例如：
var oNewWin = window.open("web.html","topFrame","top=10,left=10");
alert(oNewWin.opener == window); //true,证明opener属性指向window对象
但一般说来，最好尽量少弹出窗口。记住，弹出式窗口拦截程序并不知道合法弹出式窗口与广告之间的区别，因此最好在弹出窗口时警告用户。

3. 系统对话框
利用window对象的alert()、confirm()和prompt()方法向用户弹出信息。
alert()方法
警告对话框，它只接受一个参数，即要显示给用户的文本。
调用alert()方法后，浏览器将创建一个具有OK按钮的系统消息框，显示指定的文本。
例如：
alert("hello");
confirm()方法
确认对话框，与警告对话框相似。
确认对话框中除OK按钮外还有Cancel按钮，这样允许用户说明是否执行指定的动作。
例如：
confirm("are you sure");
confirm()方法返回一个Boolean值，如果点击的是OK按钮，返回true，点击的是Cancel按钮，返回false。可根据返回值执行不同的程序。
prompt()方法
该对话框提示用户输入某些信息
除OK按钮和Cancel按钮外，该对话框还有文本框，要求用户在此输入某些数据。
该方法接受两个参数，即要显示给用户的文本和文本框中的默认文本（可以是空串）。
例如：
var sResult = prompt("name", "");
if(sResult) alert("you are "+sResult);
如果点击OK按钮，将文本框中的值作为函数值返回。如果点击Cancel按钮，返回null。

所有对话框窗口都是系统窗口，意味着不同的操作系统（有时是不同的浏览器）显示的窗口可能不同。这也意味着你对以什么字体、颜色等外观显示窗口没有任何控制权。
其次，这些对话框是模式化的，意思是如果用户未点击OK按钮或Cancel按钮关闭该对话框，就不能在浏览器窗口中做任何操作。

4. 状态栏
状态栏是底部边界内的区域，用于向用户显示信息。
一般说来，状态栏告诉了用户何时在载入页面，何时完成载入页面。但可以用window对象的两个属性设置它的值，即status和defaultStatus属性。status可以使状态栏的文本暂时改变，而defaultStatus则可在用户离开当前页面前一直改变该文本。
例如：
window.defaultStatus = "welcome";
在第一次载入页面时，可使用默认的状态栏消息"welcome"
<a href="book.htm" οnmοuseοver="window.status='book'">book</a>
把鼠标移到某个链接上时显示该链接的信息'book'
注意不要过度使用状态栏，以使它分散用户的注意力。

5. 时间间隔和暂停
JavaScript支持暂停和时间间隔，这可有效地告诉浏览器应该何时执行某行代码。
所谓暂停，是在指定的毫秒数后执行指定的代码。时间间隔是反复执行指定的代码，每次执行之间等待指定的毫秒数。
setTimeout()方法
用window对象的setTimeout()方法设置暂停。
该方法接受两个参数，要执行的代码和在执行它之前要等待的毫秒数（1/1000秒）。
第一个参数可以是代码串（与eval()函数的参数相同），也可是函数指针。
例如：
setTimeout("alert('hi');", 1000);
setTimeout(function(){alert('hi');}, 1000);
或者
setTimeout(function(){say, 1000);
function say(){alert('hi');}
在调用setTimeout()后，就不应该再执行它的代码。
要取消还未执行的暂停，可调用clearTimeout()方法，并将暂停ID传递给它
例如：
var timer = setTimeout("alert('hi');", 1000);
clearTimeout(timer);
setInterval()方法
用window对象的setTimeout()方法设置时间间隔。
它无限次地每隔指定的时间段就重复一次指定的代码。
参数与setTimeout()相同，是要执行的代码和每次执行之间等待的毫秒数。
例如：
setInterval("alert('hi');", 5000);
与setTimeout()类似，ClearInterval()方法可用这个ID阻止再次执行该代码。
例如：
var timer = setInterval("alert('hi');", 5000);
ClearInterval(timer);
有时可以用暂停实现时间间隔，这样即不必跟踪时间间隔的ID。
例如：
var n = 0;
function add(){
 n++;
 if(n==6) ClearInterval(timer);
}
var timer = setInterval(add, 1000);
用暂停实现：
var n = 0;
function add(){
 n++;
 if(n!=6) setTimeout(add, 1000);
}
setTimeout(add, 1000);
在执行一组指定的代码前等待一段时间，则使用暂停。如果要反复执行某些代码，就使用时间间隔。

6. 历史
使用window对象的history属性可以访问浏览器窗口的历史。
所谓历史，是用户访问过的站点的列表。
出于安全原因，所有导航只能通过历史完成，不能得到浏览器历史中包含的页面的URL。
go()方法
只有一个参数，即前进或后退的页面数。
如果是负数，就在浏览器历史中后退。如果是正数，就前进。
例如：
window.history.go(-1); //后退一页
window.history.go(1); //前进一页
或者
history.go(-1); //window对象的引用不是必需的
用back()方法和forward()方法可以实现同样的操作：
history.back(); //后退一页
history.forward(); //前进一页
用length属性查看历史中的页面数：
alert(history.length);
如果想前进或后退多个页面，可以用length属性看看是否可以这样做。

为了把浏览器中javascript最基本的部分标准化，已经将BOM的主要方面纳入了html5的规范中。

Window对象

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

由于window对象同时扮演这ECMAScript中的global对象角色，因此所有全局作用域中声明的变量、函数都会变成window对象的属性和方法。举例如下：

  var age = 29;

  function sayAge(){

     alert(this.age);

  }

  alert(window.age);//29

  sayAge();//29

  window.sayAge();//29

这里在全局作用域中的定义，他们被自动归在window对象名下。由于sayAge()存在于全局作用域中，因此this.age会被映射到window.age。

其实定义全局变量与在window对象上直接定义属性还是有一点差别：    

      @#全局变量不能通过delete操作符删除，而直接在window对象上定义的属性可以。举例如下：

  var age = 29;

  window.color = "red";

  delete window.age;//在ie<9时抛出错误，在其他浏览器则返回false;

  alert(window.age);//29

  delete window.color;//在ie<9时抛出错误，在其他浏览器会返回true;

  alert(window.color);//undefined

使用var语句添加的window属性有一个名为[configurable]的特性，这个特性的值被设置为false，因此这样定义的属性不可以通过delete操作符删除。Ie8级更早的版本在遇到使用delete删除window属性的语句时，不管该属性最初是如何创建的，都会抛出错误，以示警告。

      @#尝试访问未声明的变量会抛出错误，但是通过查询window对象，可以知道某个可能未声明的变量是否存在。举例如下：

   var newValue  = oldValue;//这里会抛出错误，因为oldValue未定义

   var newValue  = window.oldValue; //这里不会抛出错误因为是一次属性查询，但是newValue为undefined

 

窗口关系及框架

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

 <frameset rows="160,*">

   <frame src="top.html" name="top">

   <frameset cols="50%,50%">

      <frame src="left.html" name="left">

       <frame src="right.html" name="right">

   </frameset>

</frameset>

这里可以通过window.frames[0]或者window.frames[“top”]来引用上方的框架。

但是最好使用top来代替window，因为top对象始终指向最外层框架，也就是浏览器窗口。使用它可以确保在一个框架中正确的访问另一个框架。而对于在一个框架中编写的任何代码来说，其中的window对象指向的都是那个框架的特定实例，而非最外层框架。

与top相对的另一个window对象是parent。其始终指向当前框架的直接上层框，在没有框架的情况下，等同于top，此时它们都等于window

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

 

窗口位置

Ie,safari,opera,chrome提供了screenLeft和screenRight属性，分别表示窗口相对于屏幕左边和上边的位置。Firefox则提供的screenX和screenY属性，但与上面两个属性并不对应。示例：

var leftPos = (typeof window.screenLeft =="number")?window.screenLeft:window.screenX;

var topPos = (typeof window.screenTop =="number")?window.screenTop:window.screenY;

这个例子用二元操作符首先确定screenLeft 和screenTop 属性是否存在，存在则取得这两个属性的值否则screenX和screenY的值。从而做到浏览器兼容。但是无法在跨浏览器的条件下取得窗口左边和上边的精确坐标值。

使用moveTo()和moveBy方法可以将窗口精确地移到一个新位置。这两个方法都接收两个参数，moveTo(x,y)接收新位置的坐标值，moveBy(m,n)接收的是在水平和垂直方向上移到的像数。但是这两个方法可能被浏览器禁用，且不适用于框架，只能对最外层的window对象使用。

 

窗口大小

跨浏览器确定窗口大小并不是很容易。各种浏览器均提供了4个属性：innerWidth,innerHeight,outerWidth,outerHeight,但是其返回值并不一致，而且在ie6中，这些属性必须在标准模式下才有效，在混杂模式下，必须通过document.body.clientWidth取得信息。

虽然最终无法确定浏览器窗口的大小，但是可以取得页面视口的大小：

  var pageWidth = window.innnerWidth;

  var 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.innerWidth和window.innerHeigeht保存着可见视口，也就是屏幕上可见页面区域的大小。移动ie浏览器不支持这些属性，但通过document.documentElement.clientWidth及

document.documentElement.clientHeight提供了相同的信息，随着页面的缩放，这些值也会相应变化。

在其他移动浏览器中document.documentElement度量的上布局视口，即渲染后页面的实际大小（与可见视口不同，可见视口只是整个页面中的一小部分）。移动ie浏览器把布局视口的信息保存在document.body.clientWidth和document.body.clientHeight中，这些值不会随着页面缩放变化。

使用resizeTo(x,y)和resizeBy(x,y)方法可以调整浏览器窗口的大小。其中resizeTo()接收浏览器窗口的新宽度和新高度，而resizeBy()接收新窗口与原窗口的宽度和高度之差。但是同样，这样两个方法可能被浏览器禁用，同时不适用于框架只能对最外层的window对象使用。

 

Window.open

Window.open()方法既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。

方法的4个参数分别为：1.要加载的URL；2.窗口目标；3.一个特性字符串；4一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。通常只须传第一个参数，最后一个参数只在不打开新窗口的情况下使用。

如果为window.open()传递第二个参数，而且该参数是已有窗口或框架的名称，那么就会在具有该名称的窗口或框架中加载第一个参数指定的URL。

如果给window.open()传递的第二个参数并不是一个已经存在的窗口或框架，那么会根据第三个参数传入的字符串创建一个新窗口或新标签页。

如果没有传入第三个参数，则会打开一个带有全部默认设置的新浏览器窗口。

在不打开新窗口的情况下，会忽略第三个参数。

第三个参数是一个逗号分隔的设置字符串（特性字符串中不允许出现空格），表示在新窗口中都显示哪些特性。

 

Window.open()会返回一个指向新窗口的引用。通过返回对象，可以操作新打开的窗口。

var testWindow = window.open("url");

  testWindow.resizeTo(500,500);

  testWindow.close();

弹出窗口关闭之后，窗口的引用仍然还在，但只能检测其closed属性。testWindow .closed;//true

新创建的window对象有一个opener对象，其中保存着打开它的原始窗口对象。这个属性只在弹出窗口的最外层window对象（top）中有定义，指向调用window.open()的窗口或框架。

testWindow.opener = null;

将openner属性设置为null就是告诉浏览器新创建的标签页不需要与打开它的标签页进行通信，因此可以运行在独立的进程中。标签页之间的联系一旦切断，将无法恢复。

 

setTimeout()与setInterval()

Javascript是单线程语言，但它允许通过设置超时值和间歇时间值来调度代码在特定的时间段运行。

超时值调用即setTimeout()接收两个参数，第一个参数可以是一个包含js代码的字符串（与eval()函数中使用字符创一样），也可以是函数，第二个参数是一个表示等待多长时间的毫秒数。

但是经过给定的时间后代码不一定执行，因为javascript是一个单线程序的解释器，因此一段时间内只能执行一段代码。，为了控制要执行的代码，就有一个javascript任务队列。这些任务会按照将它们添加到队列的顺序执行。setTimeout的第二个参数是告诉jsvascript再过多长时间将当前任务添加到队列中。

setTimeout()会返回一个数值ID，计划执行代码的唯一标识符，可以通过它来取消超时调用。在指定时间结束之前调用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);

-----------------------------------------------------------------------

  var num = 0;

  var max = 10;

  var intervalId = null;

  function incrementNumber(){

    num++;

    //如果执行次数尚未达到max设定值，则设置另一次超时调用

    if(num<max){

      setTimeout(incrementNumber,500);

    }else{

      alert("done");

    }

  }

 setTimeout(incrementNumber,500);

两段代码可以实现相同的目的。但是可以看出，在使用超时调用时，没有必要跟踪超时调用ID，因为每次执行代码之后，如果不再设置另一次超时调用，调用就会自行停止。一般认为使用超时调用来模拟间歇调用是一种最佳模式。在开发环境下，很少使用真正的间歇调用，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动（代码执行事件超长）。而使用超时调用则完全避免。

 

系统对话框

浏览器通过alert(),confirm(),prompt();方法可以调用系统对话框向用户显示信息。系统对话框与浏览器没有关系，由操作系统和浏览器设置决定，而没有css样式。此外，这几个方法打开的对话框都是同步和模态的，即显示这些对话框的时候代码会停止执行，关掉则恢复执行。

其中var result =  prompt("what's your name?","areis");会如下弹出

 

点击确定则返回文本框值，否则返回null。


BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMScript规定的Global对象。
全局作用域
由于window对象同时扮演着ECMAScript中Global对象的角色，因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。来看下面的例子：
varage=29;
functionsayAge(){ alert(this.age); } alert(window.age); //29
sayAge(); //29
window.sayAge(); //29
定义全局变量与在window对象上直接定义属性还有一点差别就是：全局变量不能通过delete操作符删除，而直接在window对象上定义的属性可以，例如：
varage=29; window.color="red";
deletewindow.age'//在IE<9时抛出错误，在其他所有浏览器中都返回false delete window.color //在IE<9时抛出错误，在其他所有浏览器中都返回true alert(window.age) ;//29 alert(window.color); //undefined
原因是使用var语句添加的window属性有一个名为[[Configurable]]的特性，这个特性的值被设置为false，因此这样定义的属性不可通过delete操作符删除。
另外，还要记住一件事：尝试访问未声明的变更会抛出错误，但是通过查询window对象，可以知道某个可能未声明的变更是否存在，如：
//这里会抛出错误，因为oldValue未定义
varnewValue=oldValue;
//这里不会抛出错误，因为这是一次属性查询
//newValue的值是undefined
varnewValue=window.oldValue;
窗口关系及框架
top对象始终指向最高(最外)层的框架，也就是浏览器窗口。与框架有关的最后一个对象是self，它始终指向window；实际上，self和window对象可以互换使用。引入
self对象的目的只是为了与top和parent对象对应起来，因此它不格外包含其它值。
窗口位置
使用下面的代码可以跨浏览器取得窗口左边和上边的位置。
varleftPos=(typeofwindwow.screenLeft=="number")?
window.screenLeft:window.screenX;
vartopPos=(typeofwindwow.screenTop=="number")?
window.screenTop:window.screenY;
使用resizeTo()和resizeBy()方法可以调整浏览器窗口的大小 。
导航和打开窗口
window。open("http://www.wrox.com","topFrame");
如果有一个名叫"topFrame"的窗口或者框架，就会在该窗口或框架加载这个URL；否则，就会创建一个新窗口并将其命名为"topFrame".
在Chrome中，将新创建的标签页的opener属性设置为null，即表示在单独的进程中运行新标签页，如下所示：
varwroxWin=window.open("http://www.wrox.com","wroxWindow","height=400,width=400,top=10,left=10,resizable=yes"); wroxWin.opener=null;
将opener属性设置为Null就是告诉浏览器新创建的标签页不需要与打开它的标签页通信，因此可以在独立的进程中运行。
间隙调用和超时调用
JavaScript是一个单线程序的解释器，因此一定时间内只能执行一段代码。为了控制要执行的代码，就有一个JavaScript任务队列。这些任务会按照将它们添加到队列的顺序执行。
setTimout()的第二个参数告诉JavaScript再过多长时间把当前任务添加到队列中。如果队列是空的，那么添加的代码会立即执行；如果队列不是空的，那么它就要等前面的代码
执行完以后再执行。
要取消尚未执行的超时调用计划，可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它，如下所示：
//设置超时调用
vartimeoutId=setTimout(function(){ alert("Hello world!"); },1000);
//注意：把它取消
clearTimeout(timeoutId);
间隙调用与超时调用类似，只不过它会按照指定的时间间隔重复执行代码，直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval().
//不建议传递字符串
setInterval("alert('Hello world!')",10000);
//推荐的调用方式
setInterval(function(){ alert("Hello world!"); },10000);
虽然这两种调用方式都没有问题，但由于传字符串可能导致性能损失，因此不建议以字符串作为第一个参数。
也可以用clearInterval()方法并传入相应的间隙ID来取消。以下是一个常见的使用间歇调用的例子：
varnum=0;
varmax=10;
varintervalId=null;
functionincrementNumber(){ num++;
//如果执行次数达到max设定的值，则取消后续尚未执行的调用
if(num==max) { clearTimeout(intervalId); alert("Done"); } } intervalId=setInterval(incrementNumber,500);
这个例子也可以用超时调用来实现，如下：
varnum=0;
varmax=10;
functionincrementNumber(){ num++;
//如果执行次数未达到max设定的值，则设置另一次超时调用
if(num<max) setTimout(incrementNumber,500);
else
alert("Done"); } setTimout(incrementNumber,500);
一般认为，使用超时调用来模拟间歇调用是一种最佳模式。在开发环境下，很少使用真正的间歇调用，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。
而像前面示例中那样使用超时调用，则完全可以避免这一点。所以，最好不要使用间歇调用。
更简洁的写法：
setTimeout(function(){
//processing
setTimeout(arguments.callee, interval); }, interval);