第6章JavaScript瀏覽器對象模型BOM課件

第6章

瀏覽器對象模型（BOM）

第6章

瀏覽器對象模型（BOM）

1本章將介紹瀏覽器對象模型（BOM），它是JavaScript編程技術(shù)的重要組成部分。

BOM提供了獨立于頁面內(nèi)容而與瀏覽器窗口進行交互的對象。本章將介紹瀏覽器對象模型（BOM），它是Ja2瀏覽器對象6.1JavaScript瀏覽器編程示例6.2瀏覽器對象6.1JavaScript瀏覽器編程示例6.36.1瀏覽器對象BOM由一系列相關(guān)的對象構(gòu)成，圖6-1所示為BOM的基本體系結(jié)構(gòu)。Window對象是整個BOM的核心，所有對象和集合都以某種方式與window對象關(guān)聯(lián)。6.1瀏覽器對象4圖6-1BOM對象關(guān)系圖

圖6-1BOM對象關(guān)系圖5BOM中定義了6種重要的對象：（1）window對象表示瀏覽器中打開的窗口；（2）document對象表示瀏覽器中加載頁面的文檔對象；（3）location對象包含了瀏覽器當前的URL信息；（4）navigator對象包含了瀏覽器本身的信息；（5）screen對象包含了客戶端屏幕及渲染能力的信息；（6）history對象包含了瀏覽器訪問網(wǎng)頁的歷史信息。BOM中定義了6種重要的對象：6除window對象之外，其他的5個對象都是window對象的屬性，它們與window對象的關(guān)系如圖6-1所示。下面將從window對象開始討論BOM。除window對象之外，其他的5個對象都是wi76.1.1window對象

Window對象表示整個瀏覽器窗口，但不包括其中的頁面內(nèi)容。Window對象可以用于移動或者調(diào)整其對應(yīng)的瀏覽器窗口的大小，或者對它產(chǎn)生其他影響。在瀏覽器宿主環(huán)境下，window對象就是JavaScript的Global對象，因此使用window對象的屬性和方法是不需要特別指明的。例如我們經(jīng)常使用的alert方法，實際上完整的調(diào)用形式應(yīng)該是window.alert，通常情況下我們在代碼中會省略window對象的聲明，直接使用其方法。

6.1.1window對象

Window對8window對象對應(yīng)著Web瀏覽器的窗口，使用它可以直接對瀏覽器窗口進行操作。window對象提供的主要功能可以分為以下5類：（1）調(diào)整窗口的大小和位置；（2）打開新窗口；（3）系統(tǒng)提示框；（4）狀態(tài)欄控制；（5）定時操作。window對象對應(yīng)著Web瀏覽器的窗口，使91．調(diào)整窗口的大小和位置（1）window.moveBy該方法將瀏覽器窗口移動指定的距離（相對定位）。用法：window.moveBy(dx,dy)1．調(diào)整窗口的大小和位置（1）window.moveBy10（2）window.moveTo該方法將瀏覽器窗口移動到指定的位置（絕對定位）。用法：window.moveTo(x,y)（2）window.moveTo該方法將瀏覽器窗口移動到指定11（3）window.resizeBy該方法將瀏覽器窗口的大小改變?yōu)橹付ǖ膶挾群透叨龋ㄏ鄬φ{(diào)整窗口大小）。用法：window.resizeBy(dw,dh)（3）window.resizeBy該方法將瀏覽器窗口的大小12（4）window.resizeTo該方法將瀏覽器窗口的大小改變?yōu)橹付ǖ膶挾群透叨龋ń^對調(diào)整窗口大?。?。用法：window.resizeTo(w,h)（4）window.resizeTo該方法將瀏覽器窗口的大小132．打開新窗口

用法：window.open([url][,target][,options])options參數(shù)可能的選項包括：（1）height:窗口的高度，單位為像素；（2）width：窗口的寬度，單位為像素；（3）left：窗口的左邊緣位置；（4）top：窗口的上邊緣位置；（5）fullscreen：是否全屏，默認值為no；（6）location:是否顯示地址欄，默認值為yes；2．打開新窗口用法：window.open([url][14（7）menubar:是否顯示菜單項，默認值為yes；（8）resizable:是否允許改變窗口大小，默認值為yes；（9）scrollbars:是否顯示滾動條，默認值為yes；（10）status:是否顯示狀態(tài)欄，默認值為yes；（11）titlebar:是否顯示標題欄，默認值為yes；（12）toolbar:是否顯示工具條，默認值為yes。

（7）menubar:是否顯示菜單項，默認值為yes；153．系統(tǒng)對話框（1）window.alert該方法將顯示消息提示框。用法：window.alert([message])3．系統(tǒng)對話框（1）window.alert16（2）window.confirm該方法將顯示一個確認提示框，其中包括“確定”和“取消”按鈕。用戶單擊“確定”按鈕時，window.confirm返回true；單擊“取消”按鈕時，window.confirm返回false。用法：window.confirm([message])（2）window.confirm該方法將17（3）mpt該方法將顯示一個消息提示框，其中包含一個文本輸入框。用法：mpt([message][,default])（3）mpt該方法將顯示一個消息提示框，184．狀態(tài)欄控制瀏覽器狀態(tài)的顯示信息可以通過window.status屬性直接進行修改。

4．狀態(tài)欄控制瀏覽器狀態(tài)的顯示信息可以通過wi195．定時操作定時操作通常有兩種使用目的，一種是周期性地執(zhí)行腳本，例如在頁面上顯示時鐘，需要每隔一秒鐘更新一次，另一種則是將某個操作延時一段時間執(zhí)行，例如某個特別耗時的操作，可以使用window.setTimeout函數(shù)使其延時執(zhí)行，而后面的腳本可以繼續(xù)運行不受影響。5．定時操作定時操作通常有兩種使用目的，一20（1）window.setInterval該函數(shù)用于設(shè)置定時器，每隔一段時間執(zhí)行指定的代碼。用法：window.setInterval(code,interval)【例6-1】timer1.html（1）window.setInterval該函數(shù)用于設(shè)置定時21（2）window.clearInterval該函數(shù)用于清除setInterval函數(shù)設(shè)置的定時器。用法：window.clearInterval(timer)【例6-2】counter1.html

（2）window.clearInterval該函數(shù)用于清除22（3）window.setTimeout該函數(shù)用于設(shè)置定時器，在一段時間之后執(zhí)行指定的代碼。用法：window.setTimeout(code,time)【例6-3】timer2.html

（3）window.setTimeout該函數(shù)用于設(shè)置定時器23（4）window.clearTimeout該函數(shù)用于清除setTimeout函數(shù)設(shè)置的定時器。用法：window.clearTimeout(timer)【例6-4】counter2.html

（4）window.clearTimeout該函數(shù)用于清除s246.1.2document對象document對象實際上是window的屬性，document對象的獨特之處是它既屬于BOM又屬于DOM。從BOM角度看，document對象由一系列集合構(gòu)成，這些集合可以訪問文檔的各個部分，并提供頁面自身的信息。由于BOM沒有統(tǒng)一的標準，各種瀏覽器中的document對象特性并不完全相同，因此在使用document對象時需要特別注意，盡量要使用各類瀏覽器都支持的通用屬性和方法。6.1.2document對象document對象實際上251．通用屬性（1）document.bgColor

該屬性為頁面的背景色。（2）document.fgColor 該屬性為頁面的前景色。1．通用屬性（1）document.bgColor 26（3）documentColor該屬性為頁面文檔中鏈接的顏色。（4）document.vlinkColor該屬性為頁面文檔中訪問過的鏈接顏色。（5）document.alinkColor該屬性為頁面文檔中激活鏈接的顏色。（3）documentColor27（6）document.domain該屬性為文檔所在的域名。（7）document.referrer該屬性為將用戶引入當前頁面的URL。（8）document.URL該屬性為當前頁面的URL。（6）document.domain28（9）document.title該屬性為當前頁面的標題。（10）document.lastModified該屬性為上次修改頁面的時間。（11）document.cookie該屬性用于設(shè)置或者讀取Cookie的值。（9）document.title29【例6-5】Cookie存取函數(shù)【例6-5】Cookie存取函數(shù)302．集合屬性

表6-1 document對象的集合屬性屬

性含

義anchors返回文檔中所有錨的集合說明：IE中document.anchors將返回所有具有name或者id屬性的錨；而在MozillaFirefox中document.anchors將返回所有具有name屬性的錨applets返回文檔中所有applet的集合embeds返回文檔中所有embed對象的集合forms返回文檔中所有表單的集合images返回文檔中所有img對象的集合links返回文檔中所有鏈接的集合，即所有設(shè)置了href屬性的<a>元素

2．集合屬性表6-1 document對象的集合屬性屬313．方法（1）document.write/writeln該方法用于在當前文檔中輸出文字。用法：document.write(text)document.writeln(text)3．方法（1）document.write/writeln32（2）document.opendocument.open和document.close是一組方法，通常與document.write/writeln方法配合使用。其中，document.open方法用于打開文檔準備寫入內(nèi)容。用法：document.open()（2）document.opendocument.open和33（3）document.close該方法用于關(guān)閉文檔，同時將寫入的內(nèi)容輸出到頁面。用法：document.close()（3）document.close該方法用于關(guān)閉文檔，同時將346.1.3location對象

表6-2 location對象屬性屬

性說

明location.hash當前頁面的URL中“#”號后面的部分location.host當前頁面的URL中主機名和端口的部分location.hostname主機名location.href當前頁面的URLlocation.pathname當前頁面的相對路徑location.port端口號tocol協(xié)議名稱location.search當前頁面的URL中問號后的部分6.1.3location對象

表6-2 locatio35表6-3 location對象屬性屬

性值location.hash#testlocation.hostsomedomain:8021location.hostnamesomedomainlocation.hrefsomedomain:8021/ex/test5.html?q=a#testlocation.pathname/ex/test5.htmllocation.port8021tocolhttp:location.search?q=a表6-3 location對象屬性屬性值loc366.1.4navigator對象navigator對象包含了關(guān)于Web瀏覽器的信息，瀏覽器的類型、版本信息都可以從該對象中獲取。表6-4給出了navigator對象各個屬性的含義。

6.1.4navigator對象navig37表6-4 navigator對象屬性屬

性說

明navigator.appCodeName瀏覽器代碼名稱navigator.appName瀏覽器名稱navigator.appVersion瀏覽器運行平臺和版本navigator.cookieEnabled瀏覽器是否接受Cookie表6-4 navigator對象屬性屬性說明38屬

性說

明navigator.onLine瀏覽器是否為在線狀態(tài)（非脫機）navigator.platform瀏覽器運行平臺navigator.userAgentHTTP用戶代理請求頭的字符串續(xù)表屬性說明navigator.onLine瀏覽39表6-5 navigator對象屬性值示例屬

性IE6.0MozillaFirefox2.0navigator.appCodeNameMozillaMozillanavigator.appNameMicrosoftInternetExplorerNetscapenavigator.appVersion4.0(compatible;MSIE6.0;WindowsNT5.1;SV1;.NETCLR1.1.4322;.NETCLR2.0.50727)5.0(Windows;zh-CN)navigator.cookieEnabledtruetruenavigator.onLinetruetruenavigator.platformWin32Win32navigator.userAgentMozilla/4.0(compatible;MSIE6.0;WindowsNT5.1;SV1;.NETCLR1.1.4322;.NETCLR2.0.50727)Mozilla/5.0(Windows;U;WindowsNT5.1;zh-CN;rv:)Gecko/20190309Firefox/

表6-5 navigator對象屬性值示例屬性IE406.1.5screen對象

表6-6 screen對象屬性屬

性含

義典型值screen.height屏幕的垂直分辨率，單位為像素800screen.width屏幕的水平分辨率，單位為像素1280screen.availHeight可用的屏幕高度（排除操作系統(tǒng)元素占用的高度，如Windows任務(wù)欄的高度）770screen.availWidth可用的屏幕寬度（排除操作系統(tǒng)元素占用的寬度，如Windows任務(wù)欄的寬度）說明：通常情況下Windows任務(wù)欄位于窗口底部，此時screen.width與srceen.avialWidth相同1280screen.colorDepth屏幕的色彩深度326.1.5screen對象

表6-6 screen對象屬41【例6-6】screen對象應(yīng)用示例

【例6-6】screen對象應(yīng)用示例426.1.6history對象

表6-7 history對象屬性和方法屬性/方法含

義history.length瀏覽歷史記錄的總數(shù)history.go(index)從瀏覽歷史中加載URL，index參數(shù)是加載URL的相對位置，index為負數(shù)時表示當前地址之前的瀏覽記錄，index為正數(shù)時表示當前地址之后的瀏覽記錄history.forward()從瀏覽歷史中加載下一個URL，相當于history.go(1)history.back()從瀏覽歷史中加載上一個URL，相當于history.go(-1)

6.1.6history對象表6-7 history對436.2JavaScript瀏覽器編程示例在JavaScript中進行瀏覽器編程通常包括以下幾種情況：（1）瀏覽器窗口的控制；（2）定時操作；（3）頁面之間的參數(shù)傳遞；（4）瀏覽器類型、操作系統(tǒng)類型的判斷。下面將按照以上的應(yīng)用需求分別介紹相關(guān)的示例。6.2JavaScript瀏覽器編程示例在JavaScr446.2.1控制瀏覽器窗口1．打開新窗口window.open方法的使用方法在前面已經(jīng)作了說明，然而在實際應(yīng)用中，僅僅打開一個新的窗口并不能真正解決問題?？紤]一個實際的應(yīng)用場景：在郵件系統(tǒng)中寫新郵件或者回復郵件時，我們一般會在主界面上直接編輯郵件內(nèi)容，如果郵件還沒有編輯完成，我們卻需要查看其他郵件，這時就要開啟一個新的瀏覽器窗口繼續(xù)編輯郵件內(nèi)容。6.2.1控制瀏覽器窗口1．打開新窗口45當然，我們希望已經(jīng)編輯的部分能夠在新瀏覽器窗口中保留。圖6-2所示的Gmail郵件系統(tǒng)就具有類似的功能，下面我們將模仿它實現(xiàn)一個簡單的示例。當然，我們希望已經(jīng)編輯的部分能夠在新瀏覽器窗46（a）Gmail主界面

（a）Gmail主界面47（b）在新窗口中編輯郵件圖6-2Gmail郵件編輯界面

（b）在新窗口中編輯郵件48【例6-7】ex1.html

【例6-8】ex2.html

【例6-7】ex1.html492．窗口最大化這里所說的“窗口最大化”并不是指單擊瀏覽器窗口右上角的“最大化”按鈕，在正常情況下，瀏覽器窗口中菜單欄、工具條、地址欄都會占用一些空間，而在一些Web應(yīng)用中我們希望能夠使用最大化的工作區(qū)域，而將菜單、工具條等隱藏。2．窗口最大化這里所說的“窗口最大化”并不是50【例6-9】ex3.html

圖6-5Firefox參數(shù)配置界面

【例6-9】ex3.html圖6-5Firefox參51【例6-10】ex4.html

【例6-10】ex4.html523．父子窗口間交互通過window.open方法打開的窗口一般不是孤立的，它與父窗口通常需要進行數(shù)據(jù)的交互。例如很多應(yīng)用系統(tǒng)都會提供這樣的檢索功能：在進行比較復雜的檢索時，通常會打開一個新的窗口，用戶在新窗口加載的頁面中輸入檢索條件，單擊“確定”按鈕，檢索條件將送回給父窗口，父窗口根據(jù)得到的條件進行檢索并且更新頁面的顯示，同時關(guān)閉子窗口。3．父子窗口間交互通過window.open53

（a）父窗口

（b）輸入檢索條件

（a）父窗口54（c）檢索結(jié)果圖6-6父子窗口交互示例

（c）檢索結(jié)果55【例6-11】ex5.html【例6-12】ex6.html

【例6-11】ex5.html566.2.2延時生效按鈕延時生效按鈕經(jīng)常會在網(wǎng)站的注冊過程中使用到，其作用主要是為了讓用戶停留幾秒鐘，仔細閱讀使用該網(wǎng)站必須要遵守的協(xié)議。6.2.2延時生效按鈕延時生效按鈕經(jīng)常會57

（a）不可用狀態(tài)

（b）可用狀態(tài)圖6-7延時生效按鈕

（a58【例6-13】ex10.html

【例6-13】ex10.html596.2.3頁面間參數(shù)傳遞

頁面之間的參數(shù)傳遞是Web開發(fā)中經(jīng)常需要解決的問題，往往也是導致初學者容易犯錯誤的問題。傳遞參數(shù)的方法有很多，前面介紹的父子窗口間交互，實際上就是一種參數(shù)傳遞的方法，當然這種方法只能局限于這種有父子關(guān)聯(lián)關(guān)系的窗口使用。6.2.3頁面間參數(shù)傳遞頁面之間的參數(shù)60還有一種被普遍應(yīng)用的方法是將參數(shù)放置在表單的某個<input>域中，通過頁面請求將參數(shù)傳遞到另一個頁面。這種方法需要服務(wù)器端的配合，數(shù)據(jù)實際上經(jīng)過了一個客戶端→服務(wù)器→客戶端的傳遞過程。這一節(jié)將介紹另外兩種頁面間傳遞參數(shù)的方法，即利用Cookie和URL傳遞參數(shù)。還有一種被普遍應(yīng)用的方法是將參數(shù)放置在表單611．使用Cookie傳遞參數(shù)Cookie可以在客戶端保存少量的用戶數(shù)據(jù)，因此它用于頁面間參數(shù)傳遞當然是可行的。使用Cookie傳遞參數(shù)的思路很簡單：在一個頁面中使用Cookie保存數(shù)據(jù)，在另一個頁面中讀取同樣的Cookie值。Cookie傳遞參數(shù)的一個典型應(yīng)用是保存用戶登錄信息。

1．使用Cookie傳遞參數(shù)Cookie可以62圖6-8用戶登錄界面圖6-8用戶登錄界面63【例6-14】ex7.html

（a）登錄成功

（b）未登錄圖6-9用戶登錄界面

【例6-14】ex7.html64【例6-15】ex8.html

【例6-15】ex8.html652．使用URL傳遞參數(shù)使用URL進行參數(shù)傳遞是比較常見的做法，URL中問號之后的部分可以作為參數(shù)傳遞的載體，例如：localhost:8021/ex/ex9.html?username=test&password=password通過解析問號之后的部分（例如：username=test&password=password），即可獲取參數(shù)的值。2．使用URL傳遞參數(shù)使用URL進行參數(shù)傳遞66例6-16和例6-17將通過URL傳遞參數(shù)的方式實現(xiàn)網(wǎng)頁動態(tài)換膚，基本思路是根據(jù)URL中的參數(shù)選擇相應(yīng)的CSS樣式表，最終效果如圖6-10所示，其中CSS樣式表如例6-16所示。例6-16和例6-17將通過URL傳遞參數(shù)67

（a）默認樣式

（b）藍色樣式圖6-10網(wǎng)頁動態(tài)換膚效果

（a）默認樣式68【例6-16】CSS樣式表

【例6-17】ex9.html

【例6-16】CSS樣式表696.2.4檢測瀏覽器及操作系統(tǒng)類型完成一件工作往往有多種方法，在JavaScript中進行瀏覽器檢測也有多種不同的形式。一種方式是根據(jù)navigator對象的userAgent和appVersion屬性提供的信息進行判斷，另一種方式是通過對象或者屬性的存在與否來檢測，例如document.all是IE獨有的特性，可以作為判斷IE瀏覽器的條件。當然我們也可以同時使用這兩種方式，例6-18所示的代碼可以獲取瀏覽器、操作系統(tǒng)類型相關(guān)的信息?！纠?-18】

獲取瀏覽器信息

6.2.4檢測瀏覽器及操作系統(tǒng)類型完成一70表6-8 browser對象屬性和方法屬

性含

義browser.UAuserAgent字符串browser.AVappVersion字符串browser.os.mac是否為Macintosh操作系統(tǒng)browser.os.win是否為Windows操作系統(tǒng)browser.os.linux是否為Linux、Unix操作系統(tǒng)browser.opera是否為Opera瀏覽器browser.khtml是否基于KHTML（Konqueror或者Safari瀏覽器）browser.safari是否為Safari瀏覽器表6-8 browser對象屬性和方法屬性含71browser.mozilla是否為Mozilla瀏覽器browser.geckoVersiongecko引擎版本，YYYYMMDD形式browser.ie是否為IE瀏覽器browser.ie50是否為IE5.0browser.ie55是否為IE5.5browser.ie60是否為IE6.0browser.ie70是否為IE7.0browser.mozilla是否為Mozilla瀏覽器br72小結(jié)本章介紹了瀏覽器對象模型（BOM）以及在JavaScript中使用BOM進行瀏覽器編程的相關(guān)技術(shù)，并且通過示例詳細地說明了BOM在Web開發(fā)中的應(yīng)用。小結(jié)本章介紹了瀏覽器對象模型（BOM73xiexie!謝謝！xiexie!謝謝！74第6章

瀏覽器對象模型（BOM）

第6章

瀏覽器對象模型（BOM）

75本章將介紹瀏覽器對象模型（BOM），它是JavaScript編程技術(shù)的重要組成部分。

BOM提供了獨立于頁面內(nèi)容而與瀏覽器窗口進行交互的對象。本章將介紹瀏覽器對象模型（BOM），它是Ja76瀏覽器對象6.1JavaScript瀏覽器編程示例6.2瀏覽器對象6.1JavaScript瀏覽器編程示例6.776.1瀏覽器對象BOM由一系列相關(guān)的對象構(gòu)成，圖6-1所示為BOM的基本體系結(jié)構(gòu)。Window對象是整個BOM的核心，所有對象和集合都以某種方式與window對象關(guān)聯(lián)。6.1瀏覽器對象78圖6-1BOM對象關(guān)系圖

圖6-1BOM對象關(guān)系圖79BOM中定義了6種重要的對象：（1）window對象表示瀏覽器中打開的窗口；（2）document對象表示瀏覽器中加載頁面的文檔對象；（3）location對象包含了瀏覽器當前的URL信息；（4）navigator對象包含了瀏覽器本身的信息；（5）screen對象包含了客戶端屏幕及渲染能力的信息；（6）history對象包含了瀏覽器訪問網(wǎng)頁的歷史信息。BOM中定義了6種重要的對象：80除window對象之外，其他的5個對象都是window對象的屬性，它們與window對象的關(guān)系如圖6-1所示。下面將從window對象開始討論BOM。除window對象之外，其他的5個對象都是wi816.1.1window對象

Window對象表示整個瀏覽器窗口，但不包括其中的頁面內(nèi)容。Window對象可以用于移動或者調(diào)整其對應(yīng)的瀏覽器窗口的大小，或者對它產(chǎn)生其他影響。在瀏覽器宿主環(huán)境下，window對象就是JavaScript的Global對象，因此使用window對象的屬性和方法是不需要特別指明的。例如我們經(jīng)常使用的alert方法，實際上完整的調(diào)用形式應(yīng)該是window.alert，通常情況下我們在代碼中會省略window對象的聲明，直接使用其方法。

6.1.1window對象

Window對82window對象對應(yīng)著Web瀏覽器的窗口，使用它可以直接對瀏覽器窗口進行操作。window對象提供的主要功能可以分為以下5類：（1）調(diào)整窗口的大小和位置；（2）打開新窗口；（3）系統(tǒng)提示框；（4）狀態(tài)欄控制；（5）定時操作。window對象對應(yīng)著Web瀏覽器的窗口，使831．調(diào)整窗口的大小和位置（1）window.moveBy該方法將瀏覽器窗口移動指定的距離（相對定位）。用法：window.moveBy(dx,dy)1．調(diào)整窗口的大小和位置（1）window.moveBy84（2）window.moveTo該方法將瀏覽器窗口移動到指定的位置（絕對定位）。用法：window.moveTo(x,y)（2）window.moveTo該方法將瀏覽器窗口移動到指定85（3）window.resizeBy該方法將瀏覽器窗口的大小改變?yōu)橹付ǖ膶挾群透叨龋ㄏ鄬φ{(diào)整窗口大?。?。用法：window.resizeBy(dw,dh)（3）window.resizeBy該方法將瀏覽器窗口的大小86（4）window.resizeTo該方法將瀏覽器窗口的大小改變?yōu)橹付ǖ膶挾群透叨龋ń^對調(diào)整窗口大小）。用法：window.resizeTo(w,h)（4）window.resizeTo該方法將瀏覽器窗口的大小872．打開新窗口

用法：window.open([url][,target][,options])options參數(shù)可能的選項包括：（1）height:窗口的高度，單位為像素；（2）width：窗口的寬度，單位為像素；（3）left：窗口的左邊緣位置；（4）top：窗口的上邊緣位置；（5）fullscreen：是否全屏，默認值為no；（6）location:是否顯示地址欄，默認值為yes；2．打開新窗口用法：window.open([url][88（7）menubar:是否顯示菜單項，默認值為yes；（8）resizable:是否允許改變窗口大小，默認值為yes；（9）scrollbars:是否顯示滾動條，默認值為yes；（10）status:是否顯示狀態(tài)欄，默認值為yes；（11）titlebar:是否顯示標題欄，默認值為yes；（12）toolbar:是否顯示工具條，默認值為yes。

（7）menubar:是否顯示菜單項，默認值為yes；893．系統(tǒng)對話框（1）window.alert該方法將顯示消息提示框。用法：window.alert([message])3．系統(tǒng)對話框（1）window.alert90（2）window.confirm該方法將顯示一個確認提示框，其中包括“確定”和“取消”按鈕。用戶單擊“確定”按鈕時，window.confirm返回true；單擊“取消”按鈕時，window.confirm返回false。用法：window.confirm([message])（2）window.confirm該方法將91（3）mpt該方法將顯示一個消息提示框，其中包含一個文本輸入框。用法：mpt([message][,default])（3）mpt該方法將顯示一個消息提示框，924．狀態(tài)欄控制瀏覽器狀態(tài)的顯示信息可以通過window.status屬性直接進行修改。

4．狀態(tài)欄控制瀏覽器狀態(tài)的顯示信息可以通過wi935．定時操作定時操作通常有兩種使用目的，一種是周期性地執(zhí)行腳本，例如在頁面上顯示時鐘，需要每隔一秒鐘更新一次，另一種則是將某個操作延時一段時間執(zhí)行，例如某個特別耗時的操作，可以使用window.setTimeout函數(shù)使其延時執(zhí)行，而后面的腳本可以繼續(xù)運行不受影響。5．定時操作定時操作通常有兩種使用目的，一94（1）window.setInterval該函數(shù)用于設(shè)置定時器，每隔一段時間執(zhí)行指定的代碼。用法：window.setInterval(code,interval)【例6-1】timer1.html（1）window.setInterval該函數(shù)用于設(shè)置定時95（2）window.clearInterval該函數(shù)用于清除setInterval函數(shù)設(shè)置的定時器。用法：window.clearInterval(timer)【例6-2】counter1.html

（2）window.clearInterval該函數(shù)用于清除96（3）window.setTimeout該函數(shù)用于設(shè)置定時器，在一段時間之后執(zhí)行指定的代碼。用法：window.setTimeout(code,time)【例6-3】timer2.html

（3）window.setTimeout該函數(shù)用于設(shè)置定時器97（4）window.clearTimeout該函數(shù)用于清除setTimeout函數(shù)設(shè)置的定時器。用法：window.clearTimeout(timer)【例6-4】counter2.html

（4）window.clearTimeout該函數(shù)用于清除s986.1.2document對象document對象實際上是window的屬性，document對象的獨特之處是它既屬于BOM又屬于DOM。從BOM角度看，document對象由一系列集合構(gòu)成，這些集合可以訪問文檔的各個部分，并提供頁面自身的信息。由于BOM沒有統(tǒng)一的標準，各種瀏覽器中的document對象特性并不完全相同，因此在使用document對象時需要特別注意，盡量要使用各類瀏覽器都支持的通用屬性和方法。6.1.2document對象document對象實際上991．通用屬性（1）document.bgColor

該屬性為頁面的背景色。（2）document.fgColor 該屬性為頁面的前景色。1．通用屬性（1）document.bgColor 100（3）documentColor該屬性為頁面文檔中鏈接的顏色。（4）document.vlinkColor該屬性為頁面文檔中訪問過的鏈接顏色。（5）document.alinkColor該屬性為頁面文檔中激活鏈接的顏色。（3）documentColor101（6）document.domain該屬性為文檔所在的域名。（7）document.referrer該屬性為將用戶引入當前頁面的URL。（8）document.URL該屬性為當前頁面的URL。（6）document.domain102（9）document.title該屬性為當前頁面的標題。（10）document.lastModified該屬性為上次修改頁面的時間。（11）document.cookie該屬性用于設(shè)置或者讀取Cookie的值。（9）document.title103【例6-5】Cookie存取函數(shù)【例6-5】Cookie存取函數(shù)1042．集合屬性

表6-1 document對象的集合屬性屬

性含

義anchors返回文檔中所有錨的集合說明：IE中document.anchors將返回所有具有name或者id屬性的錨；而在MozillaFirefox中document.anchors將返回所有具有name屬性的錨applets返回文檔中所有applet的集合embeds返回文檔中所有embed對象的集合forms返回文檔中所有表單的集合images返回文檔中所有img對象的集合links返回文檔中所有鏈接的集合，即所有設(shè)置了href屬性的<a>元素

2．集合屬性表6-1 document對象的集合屬性屬1053．方法（1）document.write/writeln該方法用于在當前文檔中輸出文字。用法：document.write(text)document.writeln(text)3．方法（1）document.write/writeln106（2）document.opendocument.open和document.close是一組方法，通常與document.write/writeln方法配合使用。其中，document.open方法用于打開文檔準備寫入內(nèi)容。用法：document.open()（2）document.opendocument.open和107（3）document.close該方法用于關(guān)閉文檔，同時將寫入的內(nèi)容輸出到頁面。用法：document.close()（3）document.close該方法用于關(guān)閉文檔，同時將1086.1.3location對象

表6-2 location對象屬性屬

性說

明location.hash當前頁面的URL中“#”號后面的部分location.host當前頁面的URL中主機名和端口的部分location.hostname主機名location.href當前頁面的URLlocation.pathname當前頁面的相對路徑location.port端口號tocol協(xié)議名稱location.search當前頁面的URL中問號后的部分6.1.3location對象

表6-2 locatio109表6-3 location對象屬性屬

性值location.hash#testlocation.hostsomedomain:8021location.hostnamesomedomainlocation.hrefsomedomain:8021/ex/test5.html?q=a#testlocation.pathname/ex/test5.htmllocation.port8021tocolhttp:location.search?q=a表6-3 location對象屬性屬性值loc1106.1.4navigator對象navigator對象包含了關(guān)于Web瀏覽器的信息，瀏覽器的類型、版本信息都可以從該對象中獲取。表6-4給出了navigator對象各個屬性的含義。

6.1.4navigator對象navig111表6-4 navigator對象屬性屬

性說

明navigator.appCodeName瀏覽器代碼名稱navigator.appName瀏覽器名稱navigator.appVersion瀏覽器運行平臺和版本navigator.cookieEnabled瀏覽器是否接受Cookie表6-4 navigator對象屬性屬性說明112屬

性說

明navigator.onLine瀏覽器是否為在線狀態(tài)（非脫機）navigator.platform瀏覽器運行平臺navigator.userAgentHTTP用戶代理請求頭的字符串續(xù)表屬性說明navigator.onLine瀏覽113表6-5 navigator對象屬性值示例屬

性IE6.0MozillaFirefox2.0navigator.appCodeNameMozillaMozillanavigator.appNameMicrosoftInternetExplorerNetscapenavigator.appVersion4.0(compatible;MSIE6.0;WindowsNT5.1;SV1;.NETCLR1.1.4322;.NETCLR2.0.50727)5.0(Windows;zh-CN)navigator.cookieEnabledtruetruenavigator.onLinetruetruenavigator.platformWin32Win32navigator.userAgentMozilla/4.0(compatible;MSIE6.0;WindowsNT5.1;SV1;.NETCLR1.1.4322;.NETCLR2.0.50727)Mozilla/5.0(Windows;U;WindowsNT5.1;zh-CN;rv:)Gecko/20190309Firefox/

表6-5 navigator對象屬性值示例屬性IE1146.1.5screen對象

表6-6 screen對象屬性屬

性含

義典型值screen.height屏幕的垂直分辨率，單位為像素800screen.width屏幕的水平分辨率，單位為像素1280screen.availHeight可用的屏幕高度（排除操作系統(tǒng)元素占用的高度，如Windows任務(wù)欄的高度）770screen.availWidth可用的屏幕寬度（排除操作系統(tǒng)元素占用的寬度，如Windows任務(wù)欄的寬度）說明：通常情況下Windows任務(wù)欄位于窗口底部，此時screen.width與srceen.avialWidth相同1280screen.colorDepth屏幕的色彩深度326.1.5screen對象

表6-6 screen對象屬115【例6-6】screen對象應(yīng)用示例

【例6-6】screen對象應(yīng)用示例1166.1.6history對象

表6-7 history對象屬性和方法屬性/方法含

義history.length瀏覽歷史記錄的總數(shù)history.go(index)從瀏覽歷史中加載URL，index參數(shù)是加載URL的相對位置，index為負數(shù)時表示當前地址之前的瀏覽記錄，index為正數(shù)時表示當前地址之后的瀏覽記錄history.forward()從瀏覽歷史中加載下一個URL，相當于history.go(1)history.back()從瀏覽歷史中加載上一個URL，相當于history.go(-1)

6.1.6history對象表6-7 history對1176.2JavaScript瀏覽器編程示例在JavaScript中進行瀏覽器編程通常包括以下幾種情況：（1）瀏覽器窗口的控制；（2）定時操作；（3）頁面之間的參數(shù)傳遞；（4）瀏覽器類型、操作系統(tǒng)類型的判斷。下面將按照以上的應(yīng)用需求分別介紹相關(guān)的示例。6.2JavaScript瀏覽器編程示例在JavaScr1186.2.1控制瀏覽器窗口1．打開新窗口window.open方法的使用方法在前面已經(jīng)作了說明，然而在實際應(yīng)用中，僅僅打開一個新的窗口并不能真正解決問題?？紤]一個實際的應(yīng)用場景：在郵件系統(tǒng)中寫新郵件或者回復郵件時，我們一般會在主界面上直接編輯郵件內(nèi)容，如果郵件還沒有編輯完成，我們卻需要查看其他郵件，這時就要開啟一個新的瀏覽器窗口繼續(xù)編輯郵件內(nèi)容。6.2.1控制瀏覽器窗口1．打開新窗口119當然，我們希望已經(jīng)編輯的部分能夠在新瀏覽器窗口中保留。圖6-2所示的Gmail郵件系統(tǒng)就具有類似的功能，下面我們將模仿它實現(xiàn)一個簡單的示例。當然，我們希望已經(jīng)編輯的部分能夠在新瀏覽器窗120（a）Gmail主界面

（a）Gmail主界面121（b）在新窗口中編輯郵件圖6-2Gmail郵件編輯界面

（b）在新窗口中編輯郵件122【例6-7】ex1.html

【例6-8】ex2.html

【例6-7】ex1.html1232．窗口最大化這里所說的“窗口最大化”并不是指單擊瀏覽器窗口右上角的“最大化”按鈕，在正常情況下，瀏覽器窗口中菜單欄、工具條、地址欄都會占用一些空間，而在一些Web應(yīng)用中我們希望能夠使用最大化的工作區(qū)域，而將菜單、工具條等隱藏。2．窗口最大化這里所說的“窗口最大化”并不是124【例6-9】ex3.html

圖6-5Firefox參數(shù)配置界面

【例6-9】ex3.html圖6-5Firefox參125【例6-10】ex4.html

【例6-10】ex4.html1263．父子窗口間交互通過window.open方法打開的窗口一般不是孤立的，它與父窗口通常需要進行數(shù)據(jù)的交互。例如很多應(yīng)用系統(tǒng)都會提供這樣的檢索功能：在進行比較復雜的檢索時，通常會打開一個新的窗口，用戶在新窗口加載的頁面中輸入檢索條件，單擊“確定”按鈕，檢索條件將送回給父窗口，父窗口根據(jù)得到的條件進行檢索并且更新頁面的顯示，同時關(guān)閉子窗口。3．父子窗口間交互通過window.open127

（a）父窗口

（b）輸入檢索條件

（a）父窗口128（c）檢索結(jié)果圖6-6父子窗口交互示例

（c）檢索結(jié)果129【例6-11】ex5.html【例6-12】ex6.html

【例6-11】ex5.html1306.2.2延時生效按鈕延時生效按鈕經(jīng)常會在網(wǎng)站的注冊過程中使用到，其作用主要是為了讓用戶停留幾秒鐘，仔細閱讀使用該網(wǎng)站必須要遵守的協(xié)議。6.2.2延時生效按鈕延時生效按鈕經(jīng)常會131

（a）不可用狀態(tài)

（b）可用狀態(tài)圖6-7延時生效按鈕

（a132【例6-13】ex10.html

【例6-13】ex10.html1336.2.3頁面間參數(shù)傳遞

頁面之間的參數(shù)傳遞是Web開發(fā)中經(jīng)常需要解決的問題，往往也是導致初學者容易犯錯誤的問題。傳遞參數(shù)的方法有很多，前面介紹的父子窗口間交互，實際上就是一種參數(shù)傳遞的方法，當然這種方法只能局限于這種有父子關(guān)聯(lián)關(guān)系的窗口使用。