BOM-window
窗口位置
screenLeft和screenTop
screenLeft 和 screenTop 屬性，分別用於表示窗口相對於屏幕左邊和上邊的位置。Firefox 則在screenX 和 screenY 屬性中提供相同的窗口位置信息，Safari 和 Chrome 也同時支持這兩個屬性。Opera雖然也支持 screenX 和 screenY 屬性，但與 screenLeft 和 screenTop 屬性並不對應，所以建議你們不要在 Opera 中使用它們。如：javascript
<body> <input type="text" id="input"> <script> var x = self.setInterval("getPos()",10); var input = document.getElementById("input"); function getPos(){ var leftPos; if(typeof window.screenLeft == "number"){ //首先肯定screenLeft 和screenTop 屬性是否存在，若是不存在（在 Firefox 中），則取得screenX 和screenY 的值。 leftPos = window.screenLeft; }else{ leftPos = screenX; } input.value = leftPos; } </script> </body>
上面這個代碼能夠直接在input 中顯示screenLeft 或screenX 的值。css
因爲各類緣由，沒法在跨瀏覽器的條件下取得窗口左邊和上邊的精確座標值。java
moveTo和moveBy
這兩個方法都接收兩個參數，其中moveTo() 接收的是新位置的 x 和 y 座標值，而 moveBy() 接收的是在水平和垂直方向上移動的像素數。如：windows
//將窗口移動到屏幕左上角 window.moveTo(0,0); //將窗向下移動 100 像素 window.moveBy(0,100); //將窗口移動到(200,300) window.moveTo(200,300); //將窗口向左移動 50 像素 window.moveBy(-50,0);
須要注意的是，這兩個方法可能會被瀏覽器禁用，這兩個方法都不適用於框架，只能對最外層的 window 對象使用。瀏覽器
窗口大小
innerWidth、innerHeight、outerWidth和outerHeight
-
在 IE9+、Safari和 Firefox中， outerWidth 和 outerHeight 返回瀏覽器窗口自己的尺寸。緩存
-
在Opera中， outerWidth 和 outerHeight 這兩個屬性的值表示頁面視圖容器的大小。服務器
-
而innerWidth 和 innerHeight則表示該容器中頁面視圖區的大小。app
-
在 Chrome 中， outerWidth 、 outerHeight 與innerWidth 、 innerHeight 返回相同的值，即視口（viewport）大小。框架
-
IE8 及更早版本沒有提供取得當前瀏覽器窗口尺寸的屬性，單能夠經過DOM 取得可見區域的相關信息：dom
-
在 IE、Firefox、Safari、Opera 和 Chrome 中，document.documentElement.clientWidth 和document.documentElement.clientHeight 中保存了頁面視口的信息。
-
在 IE6 中，這些屬性必須在標準模式下才有效；若是是混雜模式，就必須經過 document.body.clientWidth 和 document.body.clientHeight 取得相同信息。
-
而對於混雜模式下的 Chrome，則不管經過 document.documentElement 仍是 document.body 中的 clientWidth 和 clientHeight 屬性，均可以取得視口的大小。
-
因此沒法準確肯定窗口自己的大小，但能夠取得準確的頁面視口的大小：
-
其餘瀏覽器能夠經過innerWidth 和innerHeight 取得；
-
IE8 以前能夠經過DOM 取得：
-
標準模式下經過document.documentElement.clientWidth 和document.documentElement.clientHeight 取得；
-
混雜模式下經過document.body.clientWidth 和document.body.clientHeight取得；
-
能夠用如下代碼獲取innerWidth 和innerHeight（其中，document.compatMode用來判斷當前瀏覽器採用的渲染方式。BackCompat：標準兼容模式關閉。CSS1Compat：標準兼容模式開啓。）：
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; } }
其餘具體的有關移動設備視口的話題，推薦學習移動Web 開發。
resizeTo和resizeBy方法
這兩個方法都接收兩個參數，其中 resizeTo() 接收瀏覽器窗口的新寬度和新高度，而 resizeBy() 接收新窗口與原窗口的寬度和高度之差。如：
//調整到 100×100 window.resizeTo(100, 100); //調整到 200×150 window.resizeBy(100, 50); //調整到 300×300 window.resizeTo(300, 300);
有可能被瀏覽器禁用。
導航和打開窗口
使用 window.open() 方法既能夠導航到一個特定的 URL，也能夠打開一個新的瀏覽器窗口。這個方法能夠接收 4 個參數：要加載的 URL、窗口目標、一個特性字符串以及一個表示新頁面是否取代瀏覽器歷史記錄中當前加載頁面的布爾值。一般只須傳遞第一個參數，最後一個參數只在不打開新窗口的狀況下使用。
//等同於< a href="http://www.wrox.com" target="topFrame"></a> window.open("http://www.wrox.com/", "topFrame");
意思是在名爲'topFrame'的框架中打開URL。這個參數也能夠是： _self 、 _parent 、 _top 或 _blank 。
彈出窗口
若是給 window.open() 傳遞的第二個參數並非一個已經存在的窗口或框架，那麼該方法就會根據在第三個參數位置上傳入的字符串建立一個新窗口或新標籤頁。若是沒有傳入第三個參數，那麼就會打開一個帶有所有默認設置的新瀏覽器窗口。第三個參數主要有：
fullscreen
yes 或 no 表示瀏覽器窗口是否最大化。僅限IE
height 數值 表示新窗口的高度。不能小於100 width 數值 表示新窗口的寬度。不能小於100 top 數值 表示新窗口的上座標。不能是負值 left 數值 表示新窗口的左座標。不能是負值
location yes 或 no 表示是否在瀏覽器窗口中顯示地址欄。不一樣瀏覽器的默認值不一樣。若是設置爲no，地址欄可能會隱藏，也可能會被禁用（取決於瀏覽器） menubar yes 或 no 表示是否在瀏覽器窗口中顯示菜單欄。默認值爲 no resizable yes 或 no 表示是否能夠經過拖動瀏覽器窗口的邊框改變其大小。默認值爲 no scrollbars yes 或 no 表示若是內容在視口中顯示不下，是否容許滾動。默認值爲 no status yes 或 no 表示是否在瀏覽器窗口中顯示狀態欄。默認值爲 no toolbar yes 或 no 表示是否在瀏覽器窗口中顯示工具欄。默認值爲 no
注意，整個特性字符串中不容許出現空格。
調整新窗口大小
有些瀏覽器不容許咱們針對主瀏覽器窗口調整大小或移動位置。經過 window.open 返回的對象，能夠像操做其餘窗口同樣操做新打開的窗口：
var newWindow = window.open("http://www.baidu.com/", "_blank","fullscreen=yes"); newWindow.resizeTo(400,1000);
關閉新窗口
調用 close() 方法還能夠關閉新打開的窗口。
var newWindow = window.open("http://www.baidu.com/", "_blank","fullscreen=yes"); newWindow.close(); //打開以後馬上關閉
固然也可使用window.close()。
opener屬性
opener 屬性，其中保存着打開它的原始窗口對象。
var newWindow = window.open("http://www.baidu.com/", "_blank","fullscreen=yes"); document.write(newWindow.opener == window); //true
將 opener 屬性設置爲 null 就是告訴瀏覽器新建立的標籤頁不須要與打開它的標籤頁通訊，所以能夠在獨立的進程中運行。
var newWindow = window.open("http://www.baidu.com/", "_blank","fullscreen=yes"); newWindow.opener = null;
彈出窗口屏蔽程序
兩種狀況：
-
瀏覽器內置的屏蔽程序阻止的彈出窗口，window.open() 返回null，只要檢測這個值便可；
-
瀏覽器擴展或其餘程序阻止的彈出窗口，window.open() 拋出錯誤，則須要把 window.open() 封裝在一個 try-catch 塊中；
對於第一種：
var popWin = window.open("http://www.baidu.com/","_blank"); if (popWin == null){ console.log("the popup was blocked by explorer!") }
若是 popWin 被瀏覽器內置的屏蔽程序阻止了，檢測到 popWin 的值爲 null；
對於第二種：
var blocked = false; //預設彈出窗口沒有被屏蔽 //try-catch 代碼塊開始 try { var popWin = window.open("http://www.baidu.com/","_blank"); if (popWin == null){ blocked = true; //若是值爲null，說明被瀏覽器內置屏蔽程序屏蔽 } } catch(ex){ blocked = true; //若是收到錯誤，說明被瀏覽器屏蔽插件屏蔽 } //try-catch 代碼塊結束 //若是被屏蔽，返回字符串提示 if (blocked){ console.log("the popup was blocked!") }
間歇調用和超時調用
JavaScript 是單線程語言。一個是在指定的時間後執行代碼，另外一個是每隔指定的時間就執行一次代碼。
setTimeout()方法
接收兩個參數，一個是要執行的代碼，一個是以毫秒爲單位的時間。如：
setTimeout("document.write('running!')", 1000); setTimeout(function(){ document.write("running it!") }, 2000);
因爲傳遞字符串會致使性能問題，所以不建議用字符串做爲第一個參數。
另外，JavaScript 有一個任務列隊，若是列隊是空的，添加的代碼會當即執行；若是列隊不是空的，那麼要等到前面的代碼執行完了之後再執行。
clearTimeout()方法
調用setTimeout()方法後，該方法會返回一個調用 ID。這個超時調用 ID 是計劃執行代碼的惟一標識符，能夠經過它來取消超時調用。如：
var x = setTimeout(function(){ document.write("running it!") }, 3000); setTimeout(function(){ clearTimeout(x) }, 2000); //由於在2秒鐘的時候把 x 超時調用取消了，因此 3 秒後的超時調用則不會出現。
setInterval()方法 （因爲一些緣由，最好不要使用間歇調用）
參數仍然是兩個，一個是指定的執行代碼，另外一個是間歇時間。如：
setInterval("document.write('running!')", 1000); setInterval(function(){ document.write("running it!!!") }, 1500);
一樣的，調用該方法會返回一個間歇調用ID。使用clearInterval()中止：
var list = [32,14,21,34,254,3,25,4315,43,654,36,5431,1]; var num = 0; var x = setInterval(showList, 100); function showList(){ console.log(list[num]); num ++; if (num == list.length){ clearInterval(x) console.log("done!") } }
如上，以 100 毫秒的速度遍歷全部 list 的值。
也可使用超時調用來實現，如：
var list = [32,14,21,34,254,3,25,4315,43,654,36,5431,1]; var num = 0; setTimeout(showList, 100); function showList(){ console.log(list[num]); num ++; if (num < list.length){ setTimeout(showList, 100); }else{ console.log("done!"); } }
最好使用超時調用來模擬間歇調用。
系統對話框
alert()
一個字符串參數，並將其顯示給用戶。
confirm()
一個字符串參數，並將其顯示給用戶，提供兩個按鈕，一個 Ok 按鈕返回布爾值 true；另外一個按鈕 Cancel 返回布爾值 false。
prompt()
一個「提示框」，接收連兩個參數： 要顯示給用戶的文本提示和文本輸入域的默認值（能夠爲空字符串）。
如：
var str = prompt("insert your name here", ""); if (str.length > 0){ alert("welcome " + str); var result = confirm("would you want something to drink ?"); if (result){ document.write("please wait"); }else{ document.write("have a seat"); } }else { alert("can not define"); }系統對話框
alert()
一個字符串參數，並將其顯示給用戶。
confirm()
一個字符串參數，並將其顯示給用戶，提供兩個按鈕，一個 Ok 按鈕返回布爾值 true；另外一個按鈕 Cancel 返回布爾值 false。
prompt()
一個「提示框」，接收連兩個參數： 要顯示給用戶的文本提示和文本輸入域的默認值（能夠爲空字符串）。
如：
var str = prompt("insert your name here", ""); if (str.length > 0){ alert("welcome " + str); var result = confirm("would you want something to drink ?"); if (result){ document.write("please wait"); }else{ document.write("have a seat"); } }else { alert("can not define"); }screen 對象
用處不大，screen 對象基本上只涌來代表客戶端的能力：
availHeight 返回顯示屏幕的高度 (除 Windows 任務欄以外)。
availWidth 返回顯示屏幕的寬度 (除 Windows 任務欄以外)。
height 返回顯示屏幕的高度。 width 返回顯示器屏幕的寬度。 bufferDepth 設置或返回調色板的比特深度。 colorDepth 返回目標設備或緩衝器上的調色板的比特深度。 deviceXDPI 返回顯示屏幕的每英寸水平點數。 deviceYDPI 返回顯示屏幕的每英寸垂直點數。 logicalXDPI 返回顯示屏幕每英寸的水平方向的常規點數。 logicalYDPI 返回顯示屏幕每英寸的垂直方向的常規點數。 fontSmoothingEnabled 返回用戶是否在顯示控制面板中啓用了字體平滑。 pixelDepth 返回顯示屏幕的顏色分辨率（比特每像素）。 updateInterval 設置或返回屏幕的刷新率。
history 對象
能夠經過 history 對象藉由用戶訪問過的頁面列表，在不知道實際 URL 的狀況下實現後退和前進。
go()方法
接收一個參數，表示向後或向前跳轉的頁面數的一個整數值。負數表示向後跳轉，正數表示向前跳轉。如：
history.go(-1); //後退一頁 history.go(1); //前進一頁 history.go(3); //前進三頁
也能夠傳遞給該參數一個字符串，如：
history.go("baidu.com"); //跳轉到最近的 baidu.com 頁面
back()和forward()方法
這兩個方法能夠模仿瀏覽器的後退和前進按鈕如：
history.back(); //後退一頁
length屬性
該屬性保存着歷史紀錄的數量。對於加載的第一個頁面而言，history.length 爲0，經過下面的代碼能夠測試該屬性的值，能夠肯定用戶是否一開始就打開了你的頁面：
if (history.length == 0){ //第一個頁面 }
history 對象雖然不經常使用，但在建立自定義的「後退」和「前進」的按鈕，以及檢測當前頁面是否是用戶歷史紀錄中的第一個頁面時，仍是必須使用它的。
location 對象基本介紹
location 是最有用的 BOM 對象之一，它提供了與當前窗口中加載的文檔有關的信息。還提供了一些導航功能。下面是 location 對象的全部屬性：
假設當前的 URL 是: http://example.com:1234/test.htm#part2： hash 設置或返回從井號 (#) 開始的 URL（錨）。//#part2 host 設置或返回主機名和當前 URL 的端口號。//example.com:1234 hostname 設置或返回當前 URL 的主機名。//example.com href 設置或返回完整的 URL。//http://example.com:1234/test.htm#part2： pathname 設置或返回當前 URL 的路徑部分。///test/test.htm port 設置或返回當前 URL 的端口號。//1234 protocol 設置或返回當前 URL 的協議。//http: 假設當前的 URL 是: http://www.w3school.com.cn/tiy/t.asp?f=hdom_loc_search search 設置或返回從問號 (?) 開始的 URL（查詢部分）。//?f=hdom_loc_search
位置操做
assign()方法
爲其傳遞一個 URL，如：
location.assign("http://www.baidu.com");
這樣就能夠當即打開新 URL 並在瀏覽器的歷史紀錄中生成一條記錄。也能夠用 location.href 和 window.location 設置爲一個 URL 的值。
另外，也能夠修改 location 對象的其餘屬性來改變 URL。這樣會在瀏覽器的歷史紀錄中生成一條新的記錄。
replace()方法
雖然會致使瀏覽器位置的改變，但不回在歷史紀錄中生成新的記錄。而且用戶不能返回到值錢的頁面。如：
setTimeout(function(){ location.replace("http://www.baidu.com"); }, 3000)
上面的代碼，三秒鐘以後跳轉到新的頁面。
reload()方法
從新加載，接收一個可選參數，以下：
-
location.reload(); //可能從緩存中加載
-
location.reload(true); //從服務器從新加載
如：
setTimeout(reloading, 5000); function reloading(){ location.reload(true); }
每五秒鐘刷新一次頁面。
windows對象屬性
| 屬性 | 描述 |
|---|---|
| closed | 返回窗口是否已被關閉。 |
| defaultStatus | 設置或返回窗口狀態欄中的默認文本。 |
| document | 對 Document 對象的只讀引用。請參閱 Document 對象。 |
| history | 對 History 對象的只讀引用。請參數 History 對象。 |
| innerheight | 返回窗口的文檔顯示區的高度。 |
| innerwidth | 返回窗口的文檔顯示區的寬度。 |
| length | 設置或返回窗口中的框架數量。 |
| location | 用於窗口或框架的 Location 對象。請參閱 Location 對象。 |
| name | 設置或返回窗口的名稱。 |
| Navigator | 對 Navigator 對象的只讀引用。請參數 Navigator 對象。 |
| opener | 返回對建立此窗口的窗口的引用。 |
| outerheight | 返回窗口的外部高度。 |
| outerwidth | 返回窗口的外部寬度。 |
| pageXOffset | 設置或返回當前頁面相對於窗口顯示區左上角的 X 位置。 |
| pageYOffset | 設置或返回當前頁面相對於窗口顯示區左上角的 Y 位置。 |
| parent | 返回父窗口。 |
| Screen | 對 Screen 對象的只讀引用。請參數 Screen 對象。 |
| self | 返回對當前窗口的引用。等價於 Window 屬性。 |
| status | 設置窗口狀態欄的文本。 |
| top | 返回最頂層的先輩窗口。 |
| window | window 屬性等價於 self 屬性，它包含了對窗口自身的引用。 |
|
只讀整數。聲明瞭窗口的左上角在屏幕上的的 x 座標和 y 座標。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。 |
windows對象方法
| 方法 | 描述 |
|---|---|
| alert() | 顯示帶有一段消息和一個確認按鈕的警告框。 |
| blur() | 把鍵盤焦點從頂層窗口移開。 |
| clearInterval() | 取消由 setInterval() 設置的 timeout。 |
| clearTimeout() | 取消由 setTimeout() 方法設置的 timeout。 |
| close() | 關閉瀏覽器窗口。 |
| confirm() | 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。 |
| createPopup() | 建立一個 pop-up 窗口。 |
| focus() | 把鍵盤焦點給予一個窗口。 |
| moveBy() | 可相對窗口的當前座標把它移動指定的像素。 |
| moveTo() | 把窗口的左上角移動到一個指定的座標。 |
| open() | 打開一個新的瀏覽器窗口或查找一個已命名的窗口。 |
| print() | 打印當前窗口的內容。 |
| prompt() | 顯示可提示用戶輸入的對話框。 |
| resizeBy() | 按照指定的像素調整窗口的大小。 |
| resizeTo() | 把窗口的大小調整到指定的寬度和高度。 |
| scrollBy() | 按照指定的像素值來滾動內容。 |
| scrollTo() | 把內容滾動到指定的座標。 |
| setInterval() | 按照指定的週期（以毫秒計）來調用函數或計算表達式。 |
| setTimeout() | 在指定的毫秒數後調用函數或計算表達式。 |
-
每一个你不满意的现在，都有一个你没有努力的曾经。