一、window 對象
在瀏覽器中,window 對象有雙重角色,它既是通過 JS 訪問瀏覽器窗口的一個接口,又是 ECMAScript 規定的 Global 對象。這意味着在網頁中定義的任意一個對象、變量和函數,都以 window 作爲其 Global 對象。
1. 全局作用域:
- 全局變量不能通過 delete 操作符刪除,而直接在 window 對象上定義的屬性可以。
- 嘗試訪問未聲明的變量會報錯,但是通過查詢 window 對象,可以知道某個可能未聲明的變量是否存在。
2. 窗口關係及框架:
如果網頁中包含框架(frameset、frame),則每個框架都擁有自己的 window 對象,並且保存在 frames 集合中。在 frames 集合中,可以通過數值索引(從 0 開始,從左到右,從上到下)或者框架名稱來訪問相應的 window 對象。
- top 對象,始終指向最高(最外)層的框架,也就是瀏覽器窗口。
- parent 對象,始終指向當前框架的直接上層框架。
- self 對象,始終指向 window 對象。
- top 對象、parent 對象 和 self 對象 都是 window 對象的屬性,可以通過 window.parent、window.top、window.self 等形式來訪問。
// 訪問框架的方法
window.frames[index];
window.frames[name];
top.frames[index];
top.frames[name];
frames[index];
frames[name];
3. 窗口位置:
獲取窗口位置的 window 對象的屬性:
- window.screenLeft、window.screenTop(IE、Safari、Opera 和 Chrome)
- window.screenX、window.screenY(Firefox)
改變窗口位置的 window 對象的方法:
- window.moveBy() 接收的是在水平和垂直方向上移動的像素數,以右和下爲正。
- window.moveTo() 接收的是新位置的 x 和 y 的座標值。
4. 窗口大小:
獲取窗口大小的 window 對象的屬性:window.innerWidth、window.innerHeight、window.outerWidth、window.outerHeight
獲取窗口大小的 document 對象的屬性:document.documentElement.clientWidth、document.documentElement.clientHeight
改變窗口大小的 window 對象的方法:window.resizeBy()、window.resizeTo()
5. 導航和打開窗口:
- window.open():4個參數爲要加載的URL、窗口目標、一個表示窗口特性的字符串 以及 一個表示新頁面是否取代瀏覽器歷史記錄中當前加載頁面的布爾值。
- wroWin.close():僅適用於通過 window.open() 打開的彈出窗口。
- 新打開的 window 對象有一個 opener 屬性,其中保存着打開它的原始窗口對象。
wroWin.opener == window; // true
6. 間歇調用和超時調用:
- setTimeout(function,interver)、clearTimeout(),setTimeout() 函數中的 this 在非嚴格模式下指向 window 對象,在嚴格模式下是 undefined。
- setInterval(function,interver)、clearInterval(),setInterval() 函數中的 this 同上。
7. 系統對話框:
- alert()、confirm()、prompt()
- window.print()、window.find()
二、location 對象
location 對象提供了當前窗口中加載的文檔有關的信息,還提供了一些導航功能。它既是 window 對象的屬性,也是 document 對象的屬性。
1. location 對象的屬性:
hash(hash)、host(服務器名稱和端口)、hostname(服務器名稱)、href(完整URL)、pathname(目錄和文件名)、port(端口)、protocol(協議)、search(查詢字符串)
2. location 對象的方法:
- location.assign(url):改變瀏覽器的位置
等價於 window.location = url
等價於 location.href = url
- location.replace()
- location.reload()
三、navigator 對象
navigator 對象提供了與瀏覽器有關的信息。
1. navigator 對象的屬性:
navigator 對象的屬性通常用於檢測顯示網頁的瀏覽器類型。
navigator.plugins、navigator.onLine
2. navigator 對象的方法:navigator.registerContentHandler()、navigator.registerProtocolHandler()
四、screen 對象
screen 對象保存着與客戶端顯示器有關的信息。
1. screen 對象的屬性:screen.availWidth、screen.availHeight、screen.width、screen.height
五、history 對象
history 對象爲訪問瀏覽器的歷史記錄開了一個小縫隙。
1. history 對象的屬性:history.length,表示保存的歷史記錄的數量
2. history 對象的方法:history.go()、history.back()、history.forward()