BOM
window對象
BOM的核心對象是window，它表示瀏覽器的一個(gè)實(shí)例。在瀏覽器中，window對象有雙重角色，它既是通過JavaScript訪問瀏覽器窗口的一個(gè)接口，又是ES規(guī)定的Global對象。這意味著在網(wǎng)頁中定義的任何一個(gè)對象、變量和函數(shù)，都以window作為其Global對象，因此有權(quán)訪問parseInt()等方法。
全局作用域
由于window對象同樣扮演著ES中Global對象的角色，因此所有在全局作用域中聲明的變量、函數(shù)都會變成window對象的屬性和方法。
拋開全局變量會成為window對象的屬性不談，定義全局變量與在window對象上直接定義屬性還是有一點(diǎn)差別：全局變量不能通過delete操作符刪除，而直接在window對象上的定義的屬性可以。
var age = 29;
window.color = "red";
//在IE < 9 時(shí)拋出錯(cuò)誤，在其他所有瀏覽器中都返回false
delete window.age;
//在IE < 9 時(shí)拋出錯(cuò)誤，在其他所有瀏覽器中都返回true
delete window.color; //returns true
alert(window.age); //29
alert(window.color); //undefined
使用var語句添加的window屬性有一個(gè)名為[[Configurable]]的特性，這個(gè)特性的值被設(shè)置為false，因此這樣定義的屬性不可以通過delete操作符刪除。
另外還要記住一件事：嘗試訪問未聲明的變量會拋出錯(cuò)誤，但是通過查詢window對象，可以知道某個(gè)可能未聲明的變量是否存在：
//這里會拋出錯(cuò)誤，因?yàn)閛ldValue未定義
var newValue = oldValue;
//這里不會拋出錯(cuò)誤，因?yàn)檫@是一次屬性查詢
//newValue 的值是undefined
var newValue = window.oldValue;
Windows Mobile平臺的IE瀏覽器不允許通過window.property=value之類的形式，直接在window對象上創(chuàng)建新的屬性或方法。可是，在全局作用域中聲明的所有變量和函數(shù)，照樣會變成window對象的成員。
窗口關(guān)系及框架
如果頁面中包含框架，則每個(gè)框架都擁有自己的window對象，并且保存在frames集合中。在frames集合中，可以通過數(shù)值索引（從0開始，從左至右，從上到下）或者框架名稱來訪問相應(yīng)的window對象。每個(gè)window對象都有一個(gè)name屬性，其中包含框架的名稱：
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset rows="160,*">
<frame src="frame.htm" name="topFrame">
<frameset cols="50%,50%">
<frame src="anotherframe.htm" name="leftFrame">
<frame src="yetanotherframe.htm" name="rightFrame">
</frameset>
</frameset>
</html>
以上代碼創(chuàng)建了一個(gè)框架集，其中一個(gè)框架居上，兩個(gè)框架居下?？梢酝ㄟ^window.frames[0]或者window.frames["topFrame"]來引用上方的框架。不過，恐怕你最好使用top而非window來引用這些框架（top.frames[0]）。
top對象始終指向最高（最外）層的框架，也就是瀏覽器窗口。使用它可以確保在一個(gè)框架中正確地訪問另一個(gè)框架。因?yàn)閷τ谠谝粋€(gè)框架中編寫的任何代碼來說，其中的window對象指向的都是那個(gè)框架的特定實(shí)例，而非最高層的框架。
與top相對的另一個(gè)window對象是parent。顧名思義，parent（父）對象始終指向當(dāng)前框架的直接上層框架。在某些情況下，parent有可能等于top；但在沒有框架的情況下，parent一定等于top（此時(shí)他們都等于window）：
上面代碼框架集中的一個(gè)框架包含了另一個(gè)框架集：
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset cols="50%,50%">
<frame src="red.htm" name="redFrame">
<frame src="blue.htm" name="blueFrame">
</frameset>
</html>
瀏覽器在加載完第一個(gè)框架集以后，會繼續(xù)將第二個(gè)框架集加載到rightFrame中。如果代碼位于redFrame（或blueFrame）中，那么parent對象指向的就是rightFrame。可是，如果代碼位于topFrame中，則parent指向的是top，因?yàn)閠opFrame的直接上層框架就是最外層框架。
與框架有關(guān)的最后一個(gè)對象是self，它始終指向window；實(shí)際上，self和window對象可以互換使用。引入self對象的目的只是為了與top和parent對象對應(yīng)起來，因此它不格外包含其他值。
所有這些對象都是window對象的屬性，可以通過window.parent、window.top等形式來訪問。同時(shí)，這也意味著可以將不同層次的window對象連綴起來，例如window.parent.parent.frames[0]。
窗口位置
用來確定和修改window對象位置的屬性和方法有很多。IE、Safari、Opera 和 Chrome都提供了screenLeft和screenTop屬性，分別用于表示窗口相對于屏幕左邊和上邊的位置。Firefox則再screenX和screenY屬性中提供相同的窗口位置信息，Safari和Chrome也同時(shí)支持這兩個(gè)屬性。Opera雖然也支持screenX和screenY屬性，但與screenLeft和screenTop屬性并不對應(yīng)，因此建議大家不要在Opera中使用它們。使用下拉代碼可以跨瀏覽器取得窗口左邊和上邊的位置：
var leftPos = (typeof window.screenLeft == "number") ?
window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ?
window.screenTop : window.screenY;
在使用這些值的過程中，還必須注意一些小問題。在IE、Opera中，screenLeft和screenTop中保存的是從屏幕左邊和上邊到由window對象表示的頁面可見區(qū)域的距離。換句話說，如果window對象是最外層對象，而且瀏覽器窗口緊貼屏幕最上端——即y軸坐標(biāo)為0，那么screenTop的值就是位于頁面可見區(qū)域上方的瀏覽器工具欄的像素高度。但是，在Chrome、Firefox和Safari中，screenY或screenTop中保存的是整個(gè)瀏覽器窗口相對于屏幕的坐標(biāo)值，即在窗口的y軸坐標(biāo)為0時(shí)返回0。
更讓人捉摸不透的是，F(xiàn)irefox、Safari和Chrome始終返回頁面中每個(gè)框架的top.screenX和top.screenY值。即使在頁面由于被設(shè)置了外邊距而發(fā)生偏移的情況下，相對于window對象使用screenX和screenY每次也都會返回相同的值。而IE和Opera則會給出框架相對于屏幕邊界的精確坐標(biāo)值。
最終結(jié)果，就是無法再跨瀏覽器的條件下取得窗口左邊和上邊的精確坐標(biāo)值。然而，使用moveTo()和moveBy()方法倒是有可能將窗口精確地移動到一個(gè)新位置：
//將窗口移動到屏幕左上角
window.moveTo(0,0);
//將窗口向下移動100像素
window.moveBy(0,100);
//將窗口移動到(200,300)
window.moveTo(200,300);
//將窗口向左移動50像素
window.moveBy(-50,0);
需要注意的是，這兩個(gè)方法可能會被瀏覽器禁用。而且，在Opera和IE7（及更高版本）中默認(rèn)就是禁用的。另外，這兩個(gè)方法不適用于框架，只能對最外層的window對象使用。
窗口大小
跨瀏覽器確定一個(gè)窗口的大小不是一件簡單的事。IE9+、Firefox、Safari、Opera、Chrome均為此提供了4個(gè)屬性：innerWidth、innerHeight、outerWidth 、outerHeight。在IE9+??Safari ?? Firefox中，outerWidth ?? outerHeight返回瀏覽器窗口本身的尺寸（無論是從最外層的window對象還是從某個(gè)框架訪問）。在Opera中，這兩個(gè)屬性的值表示頁面視圖容器的大小。而innerWidth ?? innerHeight則表示該容器中頁面視圖去的大?。p去邊框?qū)挾龋?。在Chrome中，outerWidth??outerHeight與innerWidth??innerHeight返回相同的值，即視口（viewport）大小而非瀏覽器窗口大小。
IE??Firefox??Safari??Opera ?? Chrome中，document.documentElement.clientWidth和document.documentElement.clientHeight中保存了頁面視口的信息。在IE6中，這些屬性必須在標(biāo)準(zhǔn)模式下才有效；如果是混雜模式，就必須通過document.body.clientWidth和document.body.clientHeight取得相同信息。而對于混雜模式下的Chrome，則無論通過document.documentElement
還是 document.body 中的 clientWidth和clientHeight 屬性，都可以取得視口的大小。????
雖然最終無法確定瀏覽器窗口本身的大小，但卻可以取得頁面視口的大?。?/p>
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;
}
}
對于移動設(shè)備，window.innerWidth ?? window.innerHeight保存著可見視口，也就是屏幕上可見頁面區(qū)域的大小。移動IE瀏覽器不支持這些屬性，但通過document.documentElement.client-
Width ?? document.documentElement.clientHeihgt提供了相同的信息。隨著頁面的縮放，這些值也會相應(yīng)變化。
在其他移動瀏覽器中，document.documentElement度量的是布局視口，即渲染后頁面的實(shí)際大?。ㄅc可見視口不同，可見視口只是整個(gè)頁面中的一小部分）。移動IE瀏覽器把布局視口的信息保存在document.body.clientWidth ??document.body.clientHeight中。這些值不會隨頁面縮放而變化。
另外，使用resizeTo()?? resizeBy()方法可以調(diào)整瀏覽器窗口的大小：
//調(diào)整到 100x100
window.resizeTo(100, 100);
//調(diào)整到200x150
window.resizeBy(100, 50);
//調(diào)整到 300x300
window.resizeTo(300, 300);
注意，這兩個(gè)方法在Opera和IE7+中默認(rèn)是禁用的。另外，這兩個(gè)方法同樣不適用于框架，而只能對最外層的window對象使用。
