[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() 方法所引發的行為就像用戶單擊瀏覽器的打印按鈕。通常,這會產生一個對話框,讓用戶可以取消或定制打印請求。
- 前言
- 第一章 JavaScript簡介
- 第三章 基本概念
- 3.1-3.3 語法、關鍵字和變量
- 3.4 數據類型
- 3.5-3.6 操作符、流控制語句(暫略)
- 3.7函數
- 第四章 變量的值、作用域與內存問題
- 第五章 引用類型
- 5.1 Object類型
- 5.2 Array類型
- 5.3 Date類型
- 5.4 基本包裝類型
- 5.5 單體內置對象
- 第六章 面向對象的程序設計
- 6.1 理解對象
- 6.2 創建對象
- 6.3 繼承
- 第七章 函數
- 7.1 函數概述
- 7.2 閉包
- 7.3 私有變量
- 第八章 BOM
- 8.1 window對象
- 8.2 location對象
- 8.3 navigator、screen與history對象
- 第九章 DOM
- 9.1 節點層次
- 9.2 DOM操作技術
- 9.3 DOM擴展
- 9.4 DOM2和DOM3
- 第十章 事件
- 10.1 事件流
- 10.2 事件處理程序
- 10.3 事件對象
- 10.4 事件類型
- 第十一章 JSON
- 11.1-11.2 語法與序列化選項
- 第十二章 正則表達式
- 12.1 創建正則表達式
- 12.2-12.3 模式匹配與RegExp對象
- 第十三章 Ajax
- 13.1 XMLHttpRequest對象
- 你不知道的JavaScript
- 一、作用域與閉包
- 1.1 作用域
- 1.2 詞法作用域
- 1.3 函數作用域與塊作用域
- 1.4 提升
- 1.5 作用域閉包
- 二、this與對象原型
- 2.1 關于this
- 2.2 全面解析this
- 2.3 對象
- 2.4 混合對象“類”
- 2.5 原型
- 2.6 行為委托
- 三、類型與語法
- 3.1 類型
- 3.2 值
- 3.3 原生函數