1. window對象
1.1 全局作用域
BOM的核心對象是window,它表示瀏覽器的一個實例。由於window對象同時扮演着ECMAScript中Global對象的角色,因此所有在全局作用域中聲明的變量、函數都是window對象的屬性和方法,例如:
function myfunc() { alert("Hello World!"); } window.myfunc();
1.2 窗口和框架
如果頁面中包含框架,那麼每個框架都擁有自己的window對象,並保存在frames集合中,可以通過數值索引(0開始)或者框架名稱來訪問相應的window對象。
<frameset> <frame src="frame1.html" name="top"/> <frameset> <frame src="frame2.html" name="left"/> <frame src="frame3.html" name="right"/> </frameset> </frameset>
以上代碼創建一個框架集,可以通過window.frames[0]或window.frames["top"]來引用第一個框架。不過,最好使用top而非window,例如top.frames[0]。
top對象始終指向最外層的框架,也就是瀏覽器窗口,使用它可以確保在一個框架中正確訪問另一個框架。與top相對的是另一個window對象parent,這個對象始終指向當前框架的直接上層框架。在一定情況下,parent可能等於top,在沒有框架的情況下,parent則一定等於top,此時它們都等於window。
最後一個與框架有關的對象是self,它始終指向window。self和window對象可以互換使用,引入self的目的只是爲了與top和parent對象對應起來。
1.3 窗口位置
用來確定和修改window對象位置的屬性和方法有很多。IE、Safari、Opera和Chrome都提供了screenLeft和screenTop屬性,分別用於表示窗口相對於屏幕左邊和上邊的位置。Firefox則在screenX和screenY屬性中提供相同的窗口位置信息,Safari和Chrome同時支持這兩個屬性。以下代碼可以跨瀏覽器取得窗口左邊和上邊的位置:
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX; var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
在使用這些值的過程中,還必須注意一些問題。IE、Opera和Chrome中,screenLeft和screenTop中保存的是從屏幕左邊和上邊到由window對象表示的頁面可見區域的距離,但是在Firefox和Safari中,screenY或screenTop中保存的是整個瀏覽器窗口相對於屏幕的座標值。
moveTo()和moveBy()方法可以將窗口移到一個新位置,這兩個方法都接收兩個參數,moveTo()接收的是新位置的x和y座標值,而moveBy()接收的是在水平和垂直方向上移動的像素數。
1.4 窗口大小
爲了確定一個窗口的大小,Firefox、Safari、Opera和Chrome提供了4個屬性:innerWidth、innerHeight、outerWidth和outerHeight。在Safari和Firefox中,outerWidth和outerHeight返回瀏覽器窗口本身的尺寸,在Opera中,這兩個屬性的值表示頁面視圖容器(單個標籤頁對應的瀏覽器窗口)的大小。而innerWidth和innerHeight則表示該容器中頁面視圖區的大小(減去邊框寬度)。在Chrome中,outerWidth、outerHeight與innerWidth、innerHeight返回相同的值,即視口大小而非瀏覽器窗口大小。IE沒有提供取得當前瀏覽器窗口尺寸的屬性。
在IE以及Firefox、Safari、Opera和Chrome中,document.documentElement.clientWidth和document.documentElement.clientHeight中保存了頁面視口的信息。在IE6中,這些屬性必須在標準模式下才有效,如果是混雜模式,必須通過document.body.clientWidth和document.body.clientHeight取得相同信息。而對於混雜模式下的Chrome,二者都可以取得視口大小。完整的代碼如下所示:
var pageWidth = window.innerWidth; var 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; } }
1.5 導航
使用window.open()方法既可以導航到一個特定的URL,也可以打開一個新的瀏覽器窗口。這個方法接收4個參數:要加載的URL、窗口目標、一個特性字符串及一個表示新頁面是否取代瀏覽器歷史中當前加載頁面的布爾值。通常只須傳遞第一個參數,最後一個參數只在不打開新窗口的情況下使用,例如:
window.open("http://www.test.com/");
第二個參數如果是已有窗口或框架的名稱,那麼就會在具有該名稱的窗口或框架中加載指定的URL。此外,第二個參數也可以是下列任何一個特殊的窗口名稱:_self、_parent、_top或_blank。
如果給window.open()傳遞的第二個參數並不是一個已存在的窗口或框架,那麼就會根據在第三個參數位置上傳入的字符串創建一個新窗口或標籤頁。如果沒有傳入第三個參數,那麼就會打開一個帶有全部默認設置的新瀏覽器窗口。在不打開新窗口的情況下,會忽略第三個參數。
window.open()方法會返回一個指向新窗口的引用。調用close方法還可以關閉新打開的窗口,例如:
var mywin = window.open("http://www.test.com/"); mywin.close();
1.6 間歇調用和超時調用
JavaScript是單線程語言,但它允許通過設置超時值和間歇值來調度代碼在特定的時刻執行。前者是在指定的時間過後執行代碼,後間是每隔指定時間就執行一次代碼。
超時調用需要使用window對象的setTimeout()方法,它接受兩個參數:要執行的代碼和以毫秒錶示的時間(即在執行代碼前的等待時間)。第一個參數可以是一個包含JavaScript代碼的字符串,也可是一個函數,例如:
setTimeout("alert('Hello World!');", 1000);
雖然傳遞字符串沒有問題,但由於該方法可能導致性能損失,因此不建議以字符串作爲第一個參數。
調用setTimeout()後,會返回一個數值ID,表示超時調用,它是計劃執行代碼的唯一標識,可以通過它來取消超時調用,可以通過clearTimeout()來取消,例如:
var myid = setTimeout("alert('Hello World!');", 1000); clearTimeout(myid);
間歇調用和超時調用類似,只不過它會照指定的時間間隔重複執行代碼,直至間歇調用被取消或者頁面被卸載。設置間歇調用的方法是setInterval(),它接受的參數與setTimeout()相同,例如:
setInterval("alert('Hello World!');", 1000);
調用setInterval()方法同樣也會返回一個間歇調用ID,該ID可用於取消間歇調用,只須使用clearInterval()方法並傳入相應ID。
1.7 系統對話框
瀏覽器通過alert()、confirm()和prompt()方法可以調用系統對話框向用戶顯示消息。系統對話框外觀由操作系統及瀏覽器設置決定。此外,通過這幾個方法打開的對話框都是同步和模態的,即顯示這些對話框的時候代碼會停止執行,關閉對話框後代碼又會恢復執行。
使用alert()方法的結果是向用戶顯示一個系統對話框,其中包含指定的文本和一個確定按鈕,例如:
alert("Hello World!");
第二種對話框是調用confirm()方法生成的,對話框除了確定按鈕外,還會顯示一個取消按鈕,兩個按鈕可以讓用戶決定是否執行給定的操作。可以檢查confirm()方法返回的布爾值,可以檢查用戶是單擊了哪個按鈕,例如:
if (confirm("Are you sure?")) { alert("yes"); } else { alert("no"); }
最後一種對話框是通過調用prompt()方法生成的,這是一個“提示”框,用於提示用戶輸入一些文本。除了確定和取消按鈕外,還會顯示一個文本輸入域,以供用戶在其中輸入內容。prompt()方法接受兩個參數:要顯示給用戶的文本提示和文本輸入域的默認值,例如:
var result = prompt("What is your name?", ""); if (result !== null) { alert("Welcome," + result); }
2. location對象
2.1 location屬性
location對象提供了與當前窗口中加載的文檔有關的信息,還提供了一些導航功能,它即是window對象的屬性,也是document對象的屬性。
屬性名 | 例子 | 說明 |
---|---|---|
hash | #contents | 返回URL中的hash(#號後跟零或多個字符)。 |
host | www.test.com:80 | 返回服務器名稱和端口號。 |
hostname | www.test.com | 返回服務器名稱。 |
href | http://www.test.com | 返回當前加載頁的完整URL。 |
pathname | /Test/ | 返回URL中的目錄和文件名。 |
port | 8080 | 返回URL中指定的端口號。 |
portocol | http: | 返回頁面使用的協議。 |
search | ?q=javascript | 返回UR的查詢字符串。 |
2.2 位置操作
使用location對象可以通過很多方式改變瀏覽器位置。最常用的是使用assign()方法併爲其傳遞一個URL,例如:
location.assign("http://www.test.com/");
如果是將location.href或window.location設置爲一個URL值,也會以該值調用assign()方法,例如:
window.location = "http://www.test.com"; location.href = "http://www.test.com";
另外,修改location對象的其他屬性,也可以改變當前加載的頁面。每次修改時,頁面都會以新URL重新加載。
當通過上述任何一種方式修改URL之後,瀏覽器的歷史記錄中就會生成一條新記錄,要禁用這種行爲,可以使用replace()方法,這個方法只接受一個參數,即要導航到的URL,例如:
location.replace("http://www.test.com/");
與位置有關的最後一個方法是reload(),它重新加載當前顯示的頁面,如果不傳遞任何參數,則頁面會以最有效的方式加載(比如從瀏覽器緩存),如果要強制從服務器重新加載,需要傳遞參數true,例如:
location.reload(true);
3. 其他對象
3.1 navigator對象
navigator對象最早由Netscape Navigator 2.0引入,現在已成爲識爲客戶端瀏覽器的事實標準,每個瀏覽器中的navigator對象有一套自己的屬性。
屬性或方法 | 說明 | IE | FF | S/C | OP |
---|---|---|---|---|---|
appCodeName | 瀏覽器的名稱,通常是Mozilla。 | 3.0+ | 1.0+ | 1.0+ | 7.0+ |
appName | 完整的瀏覽器名稱。 | 3.0+ | 1.0+ | 1.0+ | 7.0+ |
appMinorVersion | 次版本信息 | 4.0+ | - | - | 9.5+ |
appVersion | 瀏覽器的版本。 | 3.0+ | 1.0+ | 1.0+ | 7.0+ |
buildID | 瀏覽器編譯版本。 | - | 2.0+ | - | - |
cookieEnabled | 表示cookie是否啓用。 | 4.0+ | 1.0+ | 1.0+ | 7.0+ |
cpuClass | 客戶端計算機使用的CPU類型。 | 4.0+ | - | - | - |
javaEnabled() | 表示當前瀏覽器中是否啓用了Java。 | 4.0+ | 1.0+ | 1.0+ | 7.0+ |
language | 瀏覽器的主要語言。 | - | 1.0+ | 1.0+ | 7.0+ |
mimeTypes | 在瀏覽器中註冊的類型數組。 | 4.0+ | 1.0+ | 1.0+ | 7.0+ |
onLine | 表示瀏覽器是否連接到因特網。 | 4.0+ | 1.0+ | - | 9.5+ |
opsProfile | 無相關文檔。 | 4.0+ | - | - | - |
oscpu | 客戶端計算機的操作系統或CPU。 | - | 1.0+ | - | - |
platform | 瀏覽器所在的系統平臺。 | 4.0+ | 1.0+ | 1.0+ | 7.0+ |
plugins | 瀏覽器中安裝的插件信息的數組。 | 4.0+ | 1.0+ | 1.0+ | 7.0+ |
preference() | 設置用戶的首選項。 | - | 1.5+ | - | - |
product | 產品名稱。 | - | 1.0+ | 1.0+ | 7.0+ |
productSub | 關於產品的次要信息。 | - | 1.0+ | 1.0+ | 7.0+ |
registerContentHandler() | 針對特定類型將站點註冊爲處理程序。 | - | 2.0+ | - | - |
registerProtocolHandler() | 針對特定協議將站點註冊爲處理程序。 | - | 2.0 | - | - |
securityPolicy | 已經廢棄。 | - | 1.0+ | - | - |
systemLanguage | 操作系統的語言。 | 4.0+ | - | - | - |
taintEnabled() | 已經廢度。 | 4.0+ | 1.0+ | - | 7.0+ |
userAgent | 瀏覽器的用戶代理字符串。 | 3.0+ | 1.0+ | 1.0+ | 7.0+ |
userLanguage | 操作系統的默認語言。 | 4.0+ | - | - | 7.0+ |
userProfile | 藉以訪問用戶個人信息的對象。 | 4.0+ | - | - | - |
vendor | 瀏覽器的品牌。 | - | 1.0+ | 1.0+ | - |
vendorSub | 有關供應商的次要信息。 | - | 1.0+ | 1.0+ | - |
注:FF = Firefox S/C = Safari/Chrome OP = Opera
3.2 screen對象
screen對象在JavaScript中用處不大,它只用來表明客戶端的能力,其中包括瀏覽器的顯示器的信息。
屬性 | 說明 | IE | FF | S/C | OP |
---|---|---|---|---|---|
availHeight | 屏幕的像素高度減系統部件高度後的值。 | 支持 | 支持 | 支持 | 支持 |
availLeft | 未被系統部件佔用的最左側的像素值。 | 支持 | 支持 | ||
availTop | 未被系統部件佔用的最上方的像素值。 | 支持 | 支持 | ||
availWidth | 屏幕的像素寬度減系統部件寬度後的值。 | 支持 | 支持 | 支持 | 支持 |
bufferDepth | 讀、寫用於呈現屏外位圖的位數。 | 支持 | |||
colorDepth | 用於表現顏色的位置。 | 支持 | 支持 | 支持 | 支持 |
deviceXDPI | 屏幕實際的水平DPI。 | 支持 | |||
deviceYDPI | 屏幕實際的垂直DPI。 | 支持 | |||
fontSmoothingEnabled | 表示是否啓用了字體平滑。 | 支持 | |||
height | 屏幕的像素高度。 | 支持 | 支持 | 支持 | 支持 |
left | 當前屏幕距左邊的像素距離。 | 支持 | |||
logicalXDPI | 屏幕邏輯的水平DPI。 | 支持 | |||
logicalYDPI | 屏幕邏輯的垂直DPI。 | 支持 | |||
pixelDepth | 屏幕的位深。 | 支持 | 支持 | 支持 | |
top | 當前屏幕距上邊的像素距離。 | 支持 | |||
updateInterval | 讀、寫以毫秒錶示的屏幕刷新間隔時間。 | 支持 | |||
width | 屏幕的像素寬度。 | 支持 | 支持 | 支持 | 支持 |
注:FF = firefox S/C = Safari/Chrome OP = Opera
3.3 history對象
history對象保存用戶上網的歷史記錄,它是window對象的屬性,每個瀏覽器窗口、標籤頁和框架,都有自己的history對象與特定的window對象關聯。
使用go()方法可以在用戶的歷史記錄中跳轉、向前或向後。這個方法接受一個參數,表示向後或向前跳的頁數。負數表示向後跳轉,正數表示向前跳轉,例如:
history.go(-1);
可以給go()方法傳遞一個字符串參數,瀏覽器會跳轉到歷史記錄中包含該字符串的第一個位置,如果不包含,則什麼也不做,例如:
history.go("test.com");
另外還可以使用兩個簡寫方法back()和forward()來代替go()。除了上述幾個方法,history對象還有一個length屬性,保存着歷史記錄的數量,對於加載的第一個頁面,history.length等於0。