BOM 的核心是 window 對象,它表示瀏覽器的一個實例。window 對象有雙重角色,既是 JavaScript 訪問瀏覽器的一個接口,又是 ECMAScript 規定的 Global 對象。javascript
window 對象是在 ECMAScript 中做爲 Global 對象的角色,因此在全局做用域中聲明的變量、函數都會變成 window 對象的屬性和方法。
注:定義全局變量與直接在window對象上定義屬性的差異:
a. 全局變量不能經過 delete 操做符刪除,而 window 對象上定義的屬性能夠。
b. 嘗試訪問爲聲明的對象會報錯,可是經過查詢window對象的屬性則能夠判斷變量是否聲明。php
a. 若是頁面中包含框架,那麼每一個框架都擁有本身的 window 對象,而且保存在 frames 集合中。在 frames 集合中,能夠經過數值索引(從 0 開始)或者框架的 name 屬性來訪問相應的 window 對象。css
b. top 對象始終指向最高(最外)層的框架,即瀏覽器器窗口。使用 top 能夠正確的訪問另外一個框架。對於在一個框架中編寫的任何代碼來講,window 對象都指那個框架的特定實例,而非最高框架。java
c. parent(父)對象始終指向當前框架的直接上層框架。沒有框架的狀況下,parent 等於 top,且都等於 window。瀏覽器
d. self 對象始終指向window。緩存
e. top,parent,self 都是 window 的屬性,能夠經過 window. 來訪問。安全
f. 每一個 window 對象都包含本身的原生構造函數,跨框架的構造函數並不想等。服務器
window.open()方法能夠打開新窗口也能夠導航到一個特定URL。這個方法接受四個參數:要加載的URL,窗口目標,一個特性字符串,一個表示新頁面是否取代瀏覽器歷史記錄中當前頁面的布爾值。網絡
a. 若是傳遞了第二個參數,並且是已有窗口或框架的名稱,那就會在具備該名稱的窗口或框架中加載第一個參數指定的URL。如果沒有該名稱的框架,則會打開新窗口並將其命名爲該參數。能夠爲 _self,_parent,_top,_blank 。app
b. 若是第二個參數不是一個已有窗口或框架,那會根據第三個參數設置新窗口。不打開新窗口會忽略第三個參數。第三個參數的窗口特性有:
設置 | 值 | 說明 |
---|---|---|
fullscreen | yes/no | 表示瀏覽器窗口是否最大化 |
height | 數值 | 表示新窗口的高度,不能小於100 |
width | 數值 | 表示新窗口的寬度,不能小於100 |
top | 數值 | 表示新窗口的上座標,不能小於0 |
left | 數值 | 表示新窗口的左座標,不能小於0 |
location | yes/no | 表示是否在瀏覽器中顯示地址欄,取決於瀏覽器 |
menubar | yes/no | 是否顯示菜單欄,默認 no |
toolbar | yes/no | 是否顯示工具欄,默認no |
status | yes/no | 是否顯示狀態欄,默認no |
resizable | yes/no | 是否能夠經過拖動瀏覽器邊框改變大小,默認no |
scrollbars | yes/no | 是否容許窗口出現滾動條 |
var newWin = window.open('http://www.baidu.com','','height=400,width=400,top=20,left=20')
window.open() 會返回新窗口的引用。 newWin 引用對象與其餘window 對象類似。newWin.close() 能夠關閉新窗口。
新窗口 window 有一個 opener 屬性,保存打開它的原始窗口, newWin.opener == window。
JavaScript 是單線程語言,但容許經過設置超時值和間歇值來調度代碼在特定的時刻執行。
(1)超時調用 setTimeout()
setTimeout()接受兩個參數:要執行的代碼和以毫秒錶示的時間。
a. 第一個參數能夠是一個函數,也能夠是一個包含 JavaScript 代碼的字符串。
b. 第二參數表示等待多長時間再執行代碼的毫秒數。但通過該時間後指定代碼不必定會執行。
注:JavaScript是一個單線程序的解釋器,所以必定的時間只能執行一段代碼。爲了控制要執行的代碼,就有一個JavaScript任務隊列。這些任務會按照將它們添加到隊列的順序執行。setTimeout() 的第二個參數會告訴 JavaScript 再過多長時間把當前任務添加到隊列中。若是隊列是空的,那麼代碼會當即執行;若是不是空的,那麼要等待前面的任務代碼執行完畢後在執行。
調用 setTimeout() 以後,會返回一個數值 ID,表示超時調用。這個超時調用ID是執行計劃代碼的惟一標識符,能夠經過它來取消超時調用。使用clearTimeout(超時調用ID)方法能夠在代碼執行前取消超時調用。
(2)間歇調用 setInterval()
setInterval() 使用與超時調用相似。該方法會按照指定時間間隔重複執行代碼,知道間歇調用被取消或頁面被卸載。取消間歇調用的方法是:clearTnterval(間歇調用ID)。
注:最好使用超時調用來模擬間歇調用。
瀏覽器經過 alert(),confirm(),prompt()方法能夠調用系統對話框向用戶顯示消息。系統對話框與在瀏覽器中顯示的網頁沒有關係,也不包含HTML,它們的外觀由操做系統及瀏覽器設置決定,而不是由 css 決定。經過這幾個方法打開的對話框都是同步和模態的,即顯示這些對話框時代碼就會中止執行,而關掉這些對話框後代碼又會恢復執行。
(1)alert():對於Object類型,會調用它們的toString(),再顯示值
(2)confirm():該方法返回一個布爾值:true表示點擊了肯定,false表示單擊了取消
(3)prompt():該方法接受兩個參數:第一個參數是顯示給用戶的文本,第二個參數是文本域中默認顯示的內容。點擊肯定該方法會返回文本域的值,點擊取消該方法或關閉了對話框會返回null
location 對象提供了與當前窗口中加載的文檔有關的信息及導航功能。location 對象既是 window 對象的屬性,也是 document 的屬性,window.location 和 document.location 引用的是同一個對象。
location 對象能夠解析 URL 爲獨立片斷,開發人員能夠經過不一樣屬性訪問這些片斷
屬性名 | 示例 | 說明 |
---|---|---|
href | 'http:/www.wrox.com' | 返回當前頁面的完整URL,location.toString()方法也返回這個值 |
host | 'www.wrox.com:80' | 返回服務器名稱和端口號 |
hostname | 'www.wrox.com' | 返回不帶端口號的服務器名稱 |
hash | '#contents' | 返回URL中的hash(#號後跟0或多個字符串),若是URL不包含散列,則返回空字符串 |
pathname | '/s/' | 返回URL中的目錄和文件名 |
port | '8080' | 返回URL中指定的端口號 |
protocol | 'http:' | 返回頁面的協議 |
search | '?id=123' | 返回URL的查詢字符串,以?開頭 |
使用location對象能夠經過不少方法來進行頁面的跳轉。
a. assign():接受一個URL,能夠當即打開新URL
b. window.location
c. 修改location屬性,頁面都會以新的URL從新加載
以上方法都會在瀏覽器的歷史記錄中生成一條新的記錄
d. replace():接受一個URL,調用該方法後,用戶不能回到前一個頁面
e. reload():從新加載當前頁面。接受一個布爾值,傳遞true則從服務器從新加載,不然則會從瀏覽器緩存中從新加載。位於reload()以後的代碼可能不會執行,取決於網絡延遲或系統等因素。因此該方法最好放在代碼最後一行。
history 對象保存着用戶上網的歷史記錄,從窗口被打開的那一刻算起。history 是 window 的屬性,因此每一個瀏覽器窗口,每一個標籤頁乃至每一個框架,都有本身的 history 對象與特定的 window 對象關聯。
出於安全考慮,開發人員沒法得知用戶瀏覽過的URL,但能夠經過歷史記錄列表實現頁面的前進和後退。
go()方法能夠在用戶的歷史記錄中任意跳轉頁面。該方法接受一個參數,表示向前或向後跳轉的頁面數的一個整數值。負數表示向後跳轉頁面(相似單擊瀏覽器的「後退」按鈕),正數表示向前跳轉頁面(相似單擊瀏覽器的「前進」按鈕)。
後退頁面,相似單擊瀏覽器的「後退」按鈕
前進頁面,相似單擊瀏覽器的「前進」按鈕
保存着歷史記錄的數量,等於0能夠判斷是不是打開的第一個頁面。