《基于任務(wù)驅(qū)動(dòng)模式的JavaScript程序設(shè)計(jì)案例教程》課件第6章

第6章Window及相關(guān)頂級(jí)對(duì)象6.1概述

6.2頂級(jí)對(duì)象模型參考

6.3Window對(duì)象

6.4Screen對(duì)象

6.5History對(duì)象

6.6Location對(duì)象

6.7Document對(duì)象

6.1概述

在本書第4章“文檔結(jié)構(gòu)模型(DOM)”一章中，從對(duì)象模型層次關(guān)系的角度重點(diǎn)分析了對(duì)象的產(chǎn)生過(guò)程。本章將從實(shí)際應(yīng)用的角度出發(fā)，討論Window、Navigator、Screen、History、Location、Document等相關(guān)頂級(jí)對(duì)象的屬性、語(yǔ)法及如何創(chuàng)建、使用等問(wèn)題。

6.2頂級(jí)對(duì)象模型參考

在DOM架構(gòu)中，Window、Frames、Navigator等頂級(jí)對(duì)象產(chǎn)生于瀏覽器載入文檔至關(guān)閉文檔期間的不同階段，并起著互不相同且不可代替的作用。例如，Window對(duì)象在啟動(dòng)瀏覽器載入文檔的同時(shí)生成，與當(dāng)前瀏覽器窗口相關(guān)，包含窗口的最小最大化、尺寸大小等屬性，同時(shí)具有關(guān)閉窗口、創(chuàng)建新窗口等方法；而Location對(duì)象以URL的形式載入當(dāng)前窗口，并保存正在瀏覽的文檔的位置及其構(gòu)成信息，如協(xié)議、主機(jī)名、端口、路徑、URL的查詢字符串部分等。頂級(jí)對(duì)象模型的結(jié)構(gòu)如圖6-1所示。圖6-1可見(jiàn)，Window對(duì)象在層次中的最上層，而Document對(duì)象處于頂級(jí)對(duì)象的最底層。一般來(lái)說(shuō)，F(xiàn)rames對(duì)象在Window對(duì)象的下層，但當(dāng)目前文檔包含框架集時(shí)，該框架集中的每個(gè)框架都包含單獨(dú)的Window對(duì)象，每個(gè)Window對(duì)象都直接包含一個(gè)(或者間接包含多個(gè))Document對(duì)象。下面我們首先來(lái)了解Window對(duì)象。

6.3Window對(duì)象

簡(jiǎn)而言之，Window對(duì)象為瀏覽器窗口對(duì)象，為文檔提供一個(gè)顯示的容器。當(dāng)瀏覽器載入目標(biāo)文檔時(shí)，打開瀏覽器窗口的同時(shí)，創(chuàng)建Window對(duì)象的實(shí)例，Web應(yīng)用程序開發(fā)者可通過(guò)JavaScript腳本引用該實(shí)例，從而進(jìn)行諸如獲取窗口信息、設(shè)置瀏覽器窗口狀態(tài)或者新建瀏覽器窗口等操作。同時(shí)，Window對(duì)象提供一些方法產(chǎn)生圖形用戶界面中用于客戶與頁(yè)面進(jìn)行交互的對(duì)話框(模式或者非模式)，并能通過(guò)腳本獲取其返回值然后決定瀏覽器后續(xù)行為。由于Window對(duì)象是頂級(jí)對(duì)象模型中的最高級(jí)對(duì)象，因此，對(duì)當(dāng)前瀏覽器的屬性和方法，以及當(dāng)前文檔中的任何元素的操作都默認(rèn)以Window對(duì)象為起始點(diǎn)，并按照對(duì)象的繼承順序進(jìn)行訪問(wèn)和相關(guān)操作。由此，在訪問(wèn)這些目標(biāo)時(shí)，可將引用Window對(duì)象的代碼省略掉，如在需要給客戶以警告信息的場(chǎng)合調(diào)用Window對(duì)象的alert()方法產(chǎn)生警告框，可直接使用alert(targetStr)語(yǔ)句，而不需要使用window.alert(targetStr)的方法。但在框架集或者父子窗口通信時(shí)，須明確指明要發(fā)送消息的窗口名稱。

Window對(duì)象有很多的屬性和方法供我們調(diào)用，表6-1列舉了Window對(duì)象常用的屬性和方法。表6-16.3.1交互式對(duì)話框

1.警告框

警告框使用Window對(duì)象的alert()方法產(chǎn)生，用于將瀏覽器或文檔的警告信息(也可能不是惡意的警告)傳遞給客戶。該方法產(chǎn)生一個(gè)帶有短字符串消息和“確定”按鈕的模式對(duì)話框，且單擊“確定”按鈕后對(duì)話框不返回任何結(jié)果給父窗口。此方法的語(yǔ)法如下：圖6-2

2.確認(rèn)框

確認(rèn)框使用Window對(duì)象的conform()方法產(chǎn)生，用于將瀏覽器或文檔的信息(如表單提交前的確認(rèn)等)傳遞給客戶。該方法產(chǎn)生一個(gè)帶有短字符串消息和“確定”、“取消”按鈕的模式對(duì)話框，提示客戶選擇單擊其中一個(gè)按鈕表示是否同意該字符串消息：“確定”按鈕表示同意，“取消”按鈕表示不同意，并將客戶的單擊結(jié)果返回。此方法的語(yǔ)法如下：圖6-3若單擊“確定”按鈕，將彈出警告框如圖6-4所示。圖6-4若單擊“取消”按鈕或直接關(guān)閉該確認(rèn)框，將彈出警告框如圖6-5所示。圖6-5

3.提示框

提示框使用Window對(duì)象的prompt()方法產(chǎn)生，用于收集客戶關(guān)于特定問(wèn)題的反饋信息，該方法產(chǎn)生一個(gè)帶有短字符串消息的問(wèn)題和“確定”、“取消”按鈕的模式對(duì)話框，提示客戶輸入上述問(wèn)題的答案，并選擇單擊其中一個(gè)按鈕表示確定還是取消該提示框。如果客戶單擊了“確定”按鈕則將該答案返回，若單擊了“取消”按鈕或者直接關(guān)閉則返回null值。此方法的語(yǔ)法如下：程序運(yùn)行后，彈出提示框如圖6-6所示。圖6-6如果在上述提示框填入正確結(jié)果“2”，并單擊“確定”按鈕，彈出警告框如圖6-7所示。圖6-7如果在上述提示框輸入錯(cuò)誤的答案，并單擊“確定”按鈕，彈出警告框如圖6-8所示。圖6-8如果在上述提示框中單擊“取消”按鈕或直接關(guān)閉，彈出警告框如圖6-9所示。

使用prompt()方法生成提示框返回客戶的答案時(shí)，應(yīng)注意考察提示框的返回值，然后采取進(jìn)一步的動(dòng)作。圖6-96.3.2設(shè)定時(shí)間間隔

Window對(duì)象提供setInterval()方法用于設(shè)定時(shí)間間隔，即按照某個(gè)指定的時(shí)間間隔去周期觸發(fā)某個(gè)事件，典型的應(yīng)用如動(dòng)態(tài)狀態(tài)欄、動(dòng)態(tài)顯示當(dāng)前時(shí)間等。該方法的語(yǔ)法如下：6.3.3時(shí)間超時(shí)控制

Window對(duì)象提供setTimeout()方法用于設(shè)置某事件的超時(shí)，即在設(shè)定的時(shí)間到來(lái)時(shí)觸發(fā)某指定的事件，該方法的實(shí)際應(yīng)用有警告框的顯示時(shí)間、狀態(tài)欄的跑馬燈效果和打字效果等。其語(yǔ)法如下：上述代碼在頁(yè)面中顯示了一句提示信息“五秒鐘后頁(yè)面自動(dòng)跳轉(zhuǎn)”，接著通過(guò)setTimeout()函數(shù)設(shè)定5000毫秒即五秒中后執(zhí)行函數(shù)forwardPage()，在函數(shù)forwardPage()中完成了頁(yè)面的跳轉(zhuǎn)。因此用戶打開這個(gè)頁(yè)面后等待五秒鐘，就會(huì)看到頁(yè)面自動(dòng)跳轉(zhuǎn)的效果。

6.3.4創(chuàng)建和管理新窗口

Window對(duì)象提供完整的方法用于創(chuàng)建新窗口并在父窗口與子窗口之間進(jìn)行通信。一般來(lái)說(shuō)，主要使用其open()方法創(chuàng)建新瀏覽器窗口，新窗口可以包含已存在的HTML文檔或者完全由該方法創(chuàng)建的新文檔。其語(yǔ)法如下：表6-2頁(yè)面中定義了兩個(gè)按鈕，一個(gè)用于打開新窗口，通過(guò)調(diào)用window.open()方法傳入需要引入的頁(yè)面路徑，以及窗口名稱和新窗口打開時(shí)候的外觀參數(shù)，該方法的返回值為對(duì)新窗口的引用，用全局變量保存起來(lái)；第二個(gè)按鈕則表示關(guān)閉打開的新窗口。在關(guān)閉打開的新窗口之前，用if語(yǔ)句判斷該對(duì)象是否存在，如果存在，則調(diào)用其close()方法關(guān)閉窗口。

Window對(duì)象為Web應(yīng)用開發(fā)者提供了豐富的屬性和操作瀏覽器窗口及事件的方法，通過(guò)Window對(duì)象，可以訪問(wèn)對(duì)象關(guān)系層次中處于其下層的對(duì)象如Screen對(duì)象等。下面討論與瀏覽器緊密相關(guān)的Screen對(duì)象。 6.4Screen對(duì)象

在Web應(yīng)用程序中，為某種特殊目的如固定文檔窗口相對(duì)于屏幕尺寸的比例、根據(jù)顯示器的顏色位數(shù)選擇需要加載的目標(biāo)圖片等，都需要首先獲得屏幕的相關(guān)信息。Screen對(duì)象提供了height和width屬性用于獲取客戶屏幕的高度和寬度信息，如分辨率為1024×768的顯示器，調(diào)用這兩個(gè)屬性后分別返回1024和768。但并不是所有的屏幕區(qū)域都可以用來(lái)顯示文檔窗口，如任務(wù)欄等都占有一定的區(qū)域。為此，Screen對(duì)象提供了availHeight和availWidth屬性來(lái)返回客戶端屏幕的可用顯示區(qū)域。一般來(lái)說(shuō)，Windows操作系統(tǒng)的任務(wù)欄默認(rèn)在屏幕的底部，也可以被拖動(dòng)到屏幕的兩側(cè)或者頂部。假定屏幕的分辨率為1024×768，當(dāng)任務(wù)欄在屏幕的底部或者頂部時(shí)，其占據(jù)的屏幕區(qū)域大小為1024×30(像素)；當(dāng)任務(wù)欄被拖動(dòng)到屏幕兩側(cè)時(shí)，其占據(jù)的屏幕區(qū)域大小為60×768。

表6-3列出了Screen對(duì)象的常用屬性。表6-3圖6-10在頁(yè)面中單擊“初始化瀏覽器窗口”按鈕，按照InitWindow()函數(shù)設(shè)定的參數(shù)值初始化目標(biāo)窗口。通過(guò)Window對(duì)象的moveTo()方法將窗口移動(dòng)到(200,200)位置，并通過(guò)其resizeTo()方法改變目標(biāo)窗口大小為480×320，單位均為像素值。

單擊“將瀏覽器窗口居中”按鈕，JavaScript腳本通過(guò)Screen對(duì)象的width和height屬性即窗口的寬度和高度計(jì)算窗口居中時(shí)其左上頂點(diǎn)的坐標(biāo)，并通過(guò)Window對(duì)象的moveTo()方法將目標(biāo)窗口居中。單擊“全屏化瀏覽器窗口”按鈕，觸發(fā)MaxWindow()函數(shù)，調(diào)用其支持的屬性，通過(guò)Window對(duì)象的moveTo()和resizeTo()方法將目標(biāo)窗口最大化。

Screen對(duì)象保存了客戶端屏幕的相關(guān)信息，與文檔本身相關(guān)程度較弱。下面介紹在頂級(jí)對(duì)象模型中與瀏覽器瀏覽網(wǎng)頁(yè)后保存已訪問(wèn)頁(yè)面和所在位置相關(guān)信息的History對(duì)象和Location對(duì)象。

6.5History對(duì)象

6.5.1back()和forward()

History對(duì)象提供back()、?forward()和go()方法來(lái)實(shí)現(xiàn)站點(diǎn)頁(yè)面的導(dǎo)航。?back()和forward()方法實(shí)現(xiàn)的功能分別與瀏覽器工具欄中“后退”和“前進(jìn)”導(dǎo)航按鈕相同，而go()方法可接受合法參數(shù)，并將瀏覽器定位到由參數(shù)指定的歷史頁(yè)面。這三種方法觸發(fā)腳本檢測(cè)瀏覽器的歷史URL地址記錄，然后將瀏覽器定位到目標(biāo)頁(yè)面，整個(gè)過(guò)程與文檔無(wú)關(guān)。

站點(diǎn)導(dǎo)航是back()和forward()方法應(yīng)用最為廣泛的場(chǎng)合，可以想象在沒(méi)有工具欄或菜單欄的頁(yè)面(如用戶注冊(cè)進(jìn)程中間頁(yè)面等)中設(shè)置導(dǎo)航按鈕的必要性。如果在網(wǎng)站中的每一個(gè)頁(yè)面或者大部分頁(yè)面中加入下面兩句代碼，則可以實(shí)現(xiàn)類似于瀏覽器前進(jìn)和后退功能的頁(yè)面導(dǎo)航。6.5.2go()

History對(duì)象提供另外一種站點(diǎn)導(dǎo)航的方法即history.go(index|URLString)，該方法可接受兩種形式的參數(shù)：

(1)參數(shù)index傳入導(dǎo)航目標(biāo)頁(yè)面與當(dāng)前頁(yè)面之間的相對(duì)位置，正整數(shù)值表示向前，負(fù)整數(shù)值表示向后。

(2)參數(shù)URLString表示歷史URL列表中目標(biāo)頁(yè)面的URL，?要使history.go(URLString)方法有效，則URLString必須存在于歷史URL列表中。

History對(duì)象的go()方法可傳入?yún)?shù)0并設(shè)置合適的間隔時(shí)間計(jì)時(shí)器來(lái)實(shí)現(xiàn)文檔頁(yè)面重載。同時(shí)，history.go(－1)等同于history.back()，history.go(1)等同于history.forward()。實(shí)際應(yīng)用中，由于歷史URL地址列表對(duì)用戶而言一般為不可見(jiàn)的，所以其相對(duì)位置不確定，很難使用除－1、1和0之外的參數(shù)調(diào)用go()方法進(jìn)行準(zhǔn)確的站點(diǎn)頁(yè)面導(dǎo)航。

理解了保存瀏覽器訪問(wèn)歷史URL地址信息的History對(duì)象，下面介紹與瀏覽器當(dāng)前文檔URL信息相關(guān)的Location對(duì)象。

6.6Location對(duì)象

6.6.1統(tǒng)一資源定位器(URL)

URL(UniformResourceLocator，統(tǒng)一資源定位器，以下簡(jiǎn)稱URL)是Internet上用來(lái)描述信息資源的字符串，主要用在各種WWW客戶程序和服務(wù)器程序上。采用URL可以用一種統(tǒng)一的格式來(lái)描述各種信息資源，包括文件、服務(wù)器地址和目錄等。

URL常見(jiàn)格式如下：各參數(shù)的意義如下：

protocol：訪問(wèn)Internet資源和服務(wù)的網(wǎng)絡(luò)協(xié)議。常見(jiàn)的協(xié)議有Http、Ftp、File、Telnet、Gopher等。

hostname：要訪問(wèn)的資源和服務(wù)所在的主機(jī)對(duì)應(yīng)的域名，由DNS負(fù)責(zé)解析。常見(jiàn)的如、www.等。

port：網(wǎng)絡(luò)協(xié)議所使用的TCP端口號(hào)。此參數(shù)可選，并且在服務(wù)器端可自由設(shè)置。例如，Http協(xié)議常使用80端口等。

path：要訪問(wèn)的資源和服務(wù)相對(duì)于主機(jī)的路徑。此參數(shù)可選。假設(shè)目標(biāo)頁(yè)面“query.cgi”相對(duì)于主機(jī)hostname的位置為/MyWeb/htdocs/，訪問(wèn)該頁(yè)面的網(wǎng)絡(luò)協(xié)議為Http，則通過(guò)http://hostname/MyWeb/htdocs/query.cgi可訪問(wèn)目標(biāo)頁(yè)面。

search：URL中傳遞的查詢字符串，該字符串通過(guò)環(huán)境變量QUERY_STRING傳遞給CGI程序，并使用問(wèn)號(hào)(?)與CGI程序相連。若有多項(xiàng)查詢目標(biāo)，則使用加號(hào)(+)連接。此參數(shù)可選。例如要在“query.cgi”中查詢name、number和code信息，可通過(guò)語(yǔ)句http://hostname/MyWeb/htdocs/query.cgi?name+number+code實(shí)現(xiàn)。

hash：指定的文件偏移量，包括散列號(hào)(#)和該文件偏移量相關(guān)的位置點(diǎn)名