《JavaScript高级程序设计 第三版》学习笔记 （九）BOM详解

一、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引擎。