JavaScript高级程序设计之BOM

作为前端，接触最多的无非就是浏览器了，而在浏览器中，BOM的地位可以说是至高无上的。BOM翻译为浏览器对象模型，它提供了很多对象，用于访问浏览器的功能。这篇文章会对这些功能进行详细的介绍。了解BOM需要注意的一点就是，不同的浏览器厂商，对BOM的支持各不相同，除了一些共有的功能外，浏览器厂商可能会拓展一些独有的功能。

Window对象

在BOM中Window对象是核心，它给予JS访问浏览器的能力，并且又是JS规定的全局对象。因为Window是全局对象，所以在全局作用域中，添加的函数和变量都相当于是Window的属性和方法，不过与直接给Window对象添加属性不同的是，全局变量无法用delete操作符删除。例：var a = 2； window.a 得出来的值是2。

框架与窗口

HTML中有一个iframe标签。这个标签可以在浏览器内置一个新的窗口，显示指定内容，而且新的窗口拥有自己的Window对象。在Window中有一个frames的属性，它存放着窗口的集合。通过这个属性可以访问其它窗口中的Window对象。例：Window.frames[0]、Window.frames["窗口名称"]。可以通过索引和名称两种方式来访问，没有Window都有一个name属性，用于存储窗口的名称。

top和parent、self也是Window的属性。top存储的是一个对象，指向最外层的Window，也就是浏览器窗口。也就是说，无论你的页面嵌套多少个框架，你都可以通过top来直接访问浏览器窗口的Window对象。parent存储的也是一个对象，指向父级窗口。假如浏览器没有父级窗口的话，parent则执行当前窗口对象，这个时候top与parent是相等的。self存储当前窗口对象，它存在的意义其实并不是很大，平时很少有人会用的到这个属性。

窗口位置

对于窗口位置，不同的浏览器提供了不同的属性和方法来进行操作。IE、Safari、Opera和Chrome提供了screenLeft和screenTop属性，来表示窗口相对于屏幕左变和上边的位置。Firefox则提供了screenX和screenY属性来表示窗口位置。Safari和Chrome也指出Firefox提供的这两个属性。Opera也支持，但是与screenLeft、screenTop的值不对应。在使用这些值的时候，需要注意，IE、Opera的screenLeft和screenTop保存的是Window对象表示的页面可视区域到屏幕左边、上边的距离，也就是说只有浏览器全屏时，它的x、y轴才为零。而在Chrome、Firefox、Safari中，保存的是整个浏览器窗口相对于屏幕的坐标值。因此请尽量不要在生产环境中使用该属性。

moveTo()和moveBy()方法用于移动窗口位置，它们有可能会把窗口精确的移动一个新位置。两个方法都接收两个参数，moveTo接收新位置的x和y坐标值，moveBy接收的是在水平和垂直方向上移动的像素值。需要注意的是，两个方法只能给顶级Window也就是浏览器窗口使用，而且在浏览器中，这两个方法可能会被禁用。

窗口大小

Window提供了innerWidth、innerHeight、outerWidth、outerHeight来方位浏览器的宽度和高度（需要注意的是，不同浏览器对这四个属性所返回的值，有所不同）。还提供了resizeTo和resizeBy方法调整浏览器宽高，两个参数都接收两个参数。resizeTo接收新窗口的宽高作为参数，resizeBy接收新窗口与原窗口的宽高差作为参数（注意浏览器默认是禁用这两个方法的）。

导航和窗口打开

Window.open方法可以打开一个新的窗口，方法接收四个参数，第一个为必选，其余为可选。第一个参数为要打开窗口的URL、第二个参数为窗口名称、第三个参数为一个字符串来设置新窗口的显示特征，第四个参数为新页面是否添加到当前浏览器窗口历史记录的布尔值。该方法会返回一个新的Window对象，可以用来对新打开的窗口进行一些操作，比如关闭新窗口：Window.close。当然，你也可以通过新窗口Window对象的opener属性，来和原始窗口对象进行通信，也可以把该属性设为null，和原始窗口断绝关系。（注意：现今浏览器对于Window.open做了某些限制，在一些情况，浏览器会屏蔽掉该方法打开的新窗口）

间歇调用和超时调用

setTimeout方法，在指定时间执行方法，其接收两个参数，一个回调函数，用于写要执行的行为，第二个参数为时间，以毫秒为单位。方法返回一个id，用来通过clearTimeout来取消setTimeout注册的行为。setInterval方法，会按照设置的时间持续执行。其也接收两个参数，一个回调函数，用于写要执行的行为，第二个参数为时间，以毫秒为单位。方法也返回一个id，用来通过clearInterval取消setInterval注册的行为。

setTimeout执行后，便不再执行，后台便会自动对其进行回收，因此在使用setTimeout时无需通过Id来清除，也因此一般推荐用setTimeout来模拟setInterval方法的功能。

系统对话框

alert方法，会让浏览前弹出一个警告框。警告框会阻断程序的运行，所有程序必须关闭警告框后才可以正常运行。方法接收一个字符串作为参数，为警告框要显示的内容。

confirm方法，也会弹出一个警告框，与alert不同的是，它不仅有确定按钮还有个取消按钮。方法也接受一个字符串作为参数。当用户点击确定或取消后，会返回一个布尔值（true 为确定 false 为取消）

prompt方法，弹出一个提示框，与前两个警告框不同的是，它多了一个文本输入框，用户可以根据提示输入内容。方法接收两个参数，一个参数为字符串，表示提示内容，另一个参数也是字符串，表示输入框的默认值。方法在用户点击确定时，会返回输入框中的内容，点击取消时，返回一个null。

 Location对象

Location对象是一个特别的对象。因为不仅Window对象的location属性指向它，Document的location属性也指向它。也就是说通过Window和Document都可以访问到Location对象。Location对象提供了窗口中加载文档的有关信息和一些导航功能，下边会对这些功能进行简单的介绍。

位置操作

Location对象提供了几种方式，来打开一个新的页面。第一种也是最常用的一种就是location.href属性，通过给Location.href属性赋值一个url字符串，便会打开这个页面，并在浏览历史中添加一条记录。第二种是location.assign方法。方法传递一个url字符串作为参数。location.href属性在打开新页面时，其实也是调用改方法。

设置Location的其它属性，可以修改当前URl，比如hash属性，可以在URL尾部添加“#”开头的字符串。search属性可以添加?开头的字符串等。修改这些属性，都会刷新页面，并在历史记录中产生一条新的历史记录。如果不想添加历史的话，可以用replace()方法。方法接收一个url字符串作为参数。它会替换掉当前的url，并跳到新url，但浏览历史中不会添加记录。

Location提供了一个reload方法，使用该方法，可以重新加载当前页面。方法接收一个布尔类型的值作为参数，表示是否重新从服务器加载页面。true为是，false或不传则在浏览器缓存中读取页面。

Navigator对象

Navigator对象存储着浏览器的名称等相关信息，利用该对象，可以区分不同的浏览器或者其它一些和浏览器有关操作。其相关的属性，这里就不多说了，可点击这里查看。下边附上一个使用Navigator对象的实例。

function hasPlugin(name){
name = name.toLowerCase();
for(var i = 0,len = navigator.plugins.length;i<len;i++)
{
if(navigator.plugins[i].name.toLowerCase().indexOf(name)>-1)
{
return true;
}
}

return false;
}


//ie浏览器检测插件
function hasIEPlugin(name){
try{
new ActiveXObject(name);
return true;
}
catch(ex){ return false}
}

Screen对象

Screen对象并不是很常用，因此不做详细介绍，详细请点击这里

History对象

History对象保存着浏览器的浏览历史，通过该对象可以实现，前进一条记录和后退一条记录的功能。详细请点击这里