[TOC] ## 8.1 window對象 BOM的核心對象是window，它表示瀏覽器的一個實例。在瀏覽器中，window對象有雙重角色，它既是通過JavaScript訪問瀏覽器窗口的一個接口，又是ECMAScript規定的Global對象。 ### 8.1.1 全局作用域 由于window是ECMAScript規定的Global對象，因此所有在全局作用域中生命的變量、函數都會變成window對象的屬性和方法。 全局變量不能通過`delete`操作符刪除，而直接在window對象上的定義的屬性可以。 ### 8.1.2 窗口 **1.窗口位置** 取得窗口相對于屏幕左邊和上邊的位置： `screenLeft、screenRight（除FF）`；`screenX、screenY（FF）` 以下代碼可以跨瀏覽器取得窗口左邊和上邊位置（仍存在兼容性問題，建議不要使用） ~~~ var leftPos = (typeof window.screenLeft == 'number') ? window.screenLeft : window.screenX; var topPos = (typeof window.screenTop == 'number') ? window.screenTop : window.screenY; ~~~ 移動\調整瀏覽器窗體的方法：`window.moveTo(newX，newY)、window.moveBy(lengthX，lengthY)` **2. 窗口大小** 有三種方法能夠確定瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）。 對于Internet Explorer、Chrome、Firefox、Opera 以及 Safari： ~~~ window.innerHeight - 瀏覽器窗口的內部高度 window.innerWidth - 瀏覽器窗口的內部寬度 ~~~ 對于 Internet Explorer 8、7、6、5： ~~~ document.documentElement.clientHeight document.documentElement.clientWidth 或者 document.body.clientHeight document.body.clientWidth ~~~ 實用的 JavaScript 方案（涵蓋所有瀏覽器）： ~~~ var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; ~~~ 調整窗口大小（Opera和IE7以上禁用）： `window.resizeTo(newLen，newWid)、window.resizeBy(addLen,addWid)` **3. 導航和打開窗口** **window.open()**方法返回一個指向**新窗口的引用**，這個新窗口通常解除了對移動、調整瀏覽器窗口方法的限制，而且可以使用window.close()方法關閉它。 `window.open(URL,name,features,replace)` | 參數 | 描述 | |---|---| | URL | 一個可選的字符串，聲明了要在新窗口中顯示的文檔的 URL。如果省略了這個參數，或者它的值是空字符串，那么新窗口就不會顯示任何文檔。| | name | 一個可選的字符串，該字符串是一個由逗號分隔的特征列表，其中包括數字、字母和下劃線，該字符聲明了新窗口的名稱。這個名稱可以用作標記` <a> `和`<form>`的屬性 target 的值。如果該參數指定了一個已經存在的窗口，那么 open() 方法就不再創建一個新窗口，而只是返回對指定窗口的引用。在這種情況下，features 將被忽略。| | features | 一個可選的字符串，聲明了新窗口要顯示的標準瀏覽器的特征。如果省略該參數，新窗口將具有所有標準特征。在窗口特征這個表格中，我們對該字符串的格式進行了詳細的說明。| | replace | 一個可選的布爾值。規定了裝載到窗口的 URL 是在窗口的瀏覽歷史中創建一個新條目，還是替換瀏覽歷史中的當前條目。true - URL 替換瀏覽歷史中的當前條目。false - URL 在瀏覽歷史中創建新的條目。| |窗口特征|描述| |---|---| | channelmode=yes/no/1/0 | 是否使用劇院模式顯示窗口。默認為 no。| | directories=yes/no/1/0 | 是否添加目錄按鈕。默認為 yes。| | fullscreen=yes/no/1/0 | 是否使用全屏模式顯示瀏覽器。默認是 no。處于全屏模式的窗口必須同時處于劇院模式。| | height=pixels | 窗口文檔顯示區的高度。以像素計。| | left=pixels | 窗口的 x 坐標。以像素計。| | location=yes/no/1/0 | 是否顯示地址字段。默認是 yes。| | menubar=yes/no/1/0 | 是否顯示菜單欄。默認是 yes。| | resizable=yes/no/1/0 | 窗口是否可調節尺寸。默認是 yes。| | scrollbars=yes/no/1/0 | 是否顯示滾動條。默認是 yes。| | status=yes/no/1/0 | 是否添加狀態欄。默認是 yes。| | titlebar=yes/no/1/0 | 是否顯示標題欄。默認是 yes。| | toolbar=yes/no/1/0 | 是否顯示瀏覽器的工具欄。默認是 yes。| | top=pixels | 窗口的 y 坐標。| | width=pixels | 窗口的文檔顯示區的寬度。以像素計。| ### 8.1.3 間歇調用和超時調用 JavaScript是**單線程**語言，但允許通過設置超時值和間歇時間值來調度代碼在特定的時刻（**當前事件隊列沒有等待事件**）執行。 * 超時調用 `setTimeout(code,millisec)` 返回超時調用的數值ID | 參數| 描述| |---|---| | code| 必需。要調用的函數后要執行的 JavaScript 代碼串。*常用匿名函數*| | millisec| 必需。在執行代碼前需等待的毫秒數。| * 取消超時調用 `clearTimeout(timeoutId)` * 間歇調用 `setInterval(code,millisec)` 返回超時調用的數值ID | 參數| 描述| |---|---| | code| 必需。要調用的函數后要執行的 JavaScript 代碼串。*常用匿名函數*| | millisec| 必需。周期性執行或調用 code 之間的時間間隔，以毫秒計。| * 取消超時調用 `claerInterval(intervalId)` 一般認為，使用超時調用來模擬間歇調用是一種最佳模式，在開發環境下，很少使用真正的間歇調用，原因是后一個間歇調用可能會在前一個間歇調用結束之前啟動（基于js阻塞等原因）。 ### 8.1.4 系統對話框 瀏覽器通過`alert()、confirm()、prompt()`方法可以調用系統對話框向用戶顯示消息。這幾個方法打開的對話框都是**同步和模態**的，也就是說，顯示這些對話框的時候代碼會停止執行，而關掉這些對話框后代碼又會恢復執行。 **confirm(message)** 如果用戶點擊確定按鈕，則 confirm() 返回 true。如果點擊取消按鈕，則 confirm() 返回 false。 在用戶點擊確定按鈕或取消按鈕把對話框關閉之前，它將阻止用戶對瀏覽器的所有輸入。在調用 confirm() 時，將暫停對 JavaScript 代碼的執行，在用戶作出響應之前，不會執行下一條語句。 **alert(message)** 用于顯示帶有一條指定消息和一個 OK 按鈕的警告框。 **prompt(text,defaultText)** ||| |---|---| |text| 可選。要在對話框中顯示的純文本（而不是 HTML 格式的文本）。| |defaultText| 可選。默認的輸入文本。| 如果用戶單擊提示框的取消按鈕，則返回 null。如果用戶單擊確認按鈕，則返回輸入字段當前顯示的文本。 **print()** 用于打印當前窗口的內容。 調用 print() 方法所引發的行為就像用戶單擊瀏覽器的打印按鈕。通常，這會產生一個對話框，讓用戶可以取消或定制打印請求。