使用窗口和框架

1、使用窗口和框架使用窗口和框架第第1010章章本章主要內(nèi)容包括：windowwindow對象的層次結(jié)構(gòu)對象的層次結(jié)構(gòu)使用使用JavaScriptJavaScript創(chuàng)建新的窗口創(chuàng)建新的窗口利用超時功能延遲腳本動作利用超時功能延遲腳本動作顯示警告、確認(rèn)和提示顯示警告、確認(rèn)和提示使用使用JavaScriptJavaScript處理框架處理框架創(chuàng)建基于創(chuàng)建基于JavaScriptJavaScript的導(dǎo)航框架的導(dǎo)航框架10.1.1 10.1.1 windowwindow對象的屬性對象的屬性 雖然通常只有一個雖然通常只有一個windowwindow對象，但是在使用彈出窗口或者框架時，對象，但是在使用彈出

2、窗口或者框架時，就可能有多個對象，就可能有多個對象，historyhistory、documentdocument和和locationlocation對象都是對象都是windowwindow對對象的屬性象的屬性( (或子對象或子對象) )。此外，每個。此外，每個windowwindow對象還有下列屬性。對象還有下列屬性。 window.window.closedclosed: :表示窗口是否已被關(guān)閉。表示窗口是否已被關(guān)閉。 window.window.defaultstatus/statusdefaultstatus/status: :設(shè)置或返回窗口狀態(tài)欄中的默認(rèn)文設(shè)置或返回窗口狀態(tài)欄中的默認(rèn)

3、文本。本。 window.window.framesframes: :針對框架的對象數(shù)組。針對框架的對象數(shù)組。 name: :為框架為框架( (或腳本打開的窗口或腳本打開的窗口) )指定名稱。指定名稱。 window.window.parentparent: :對于框架來說，是指包含該框架的父窗口。對于框架來說，是指包含該框架的父窗口。 window.window.openeropener: :在腳本打開的窗口中，是指包含打開的腳本的窗口。在腳本打開的窗口中，是指包含打開的腳本的窗口。 window.window.selfself: :當(dāng)前當(dāng)前windoww

4、indow對象的代名詞。對象的代名詞。 10.110.1用對象控制窗口用對象控制窗口10.110.1用對象控制用對象控制窗口窗口 window.window.toptop: :使用框架時對頂層窗口的引用。使用框架時對頂層窗口的引用。 window.window.screenscreen: :存儲窗口所在屏幕信息的子對象存儲窗口所在屏幕信息的子對象分辨率、色度等。分辨率、色度等。 window. window.documentdocument: :對對documentdocument對象的只讀引用。對象的只讀引用。 window. window.innerheightinnerheight: :

5、返回窗口的文檔顯示區(qū)的高度。返回窗口的文檔顯示區(qū)的高度。 window. window.innerwidthinnerwidth: :返回窗口的文檔顯示區(qū)的寬度。返回窗口的文檔顯示區(qū)的寬度。 window. window.lengthlength: :設(shè)置或返回窗口中的框架數(shù)量。設(shè)置或返回窗口中的框架數(shù)量。 window. name: :設(shè)置或返回窗口的名稱。設(shè)置或返回窗口的名稱。（附加）（附加）windowwindow對象的方法對象的方法 open(): open():打開一個新的瀏覽器窗口或查找一個已命名的窗口。打開一個新的瀏覽器窗口或查找一個已命名的窗口。 clos

6、e() close()：關(guān)閉瀏覽器窗口。：關(guān)閉瀏覽器窗口。 alert() alert()：顯示帶有一段消息和一個確認(rèn)按鈕的警告框。：顯示帶有一段消息和一個確認(rèn)按鈕的警告框。 print() print()：打印當(dāng)前窗口的內(nèi)容。：打印當(dāng)前窗口的內(nèi)容。 focus() focus()：把鍵盤焦點給予一個窗口。：把鍵盤焦點給予一個窗口。 prompt() prompt()：顯示可提示用戶輸入的對話框。：顯示可提示用戶輸入的對話框。 10.110.1用對象控制用對象控制窗口窗口 confirm(): confirm():顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕

7、的對話框。話框。 resizeBy()resizeBy()：按照指定的像素調(diào)整窗口的大小。：按照指定的像素調(diào)整窗口的大小。 resizeTo()resizeTo()：把窗口的大小調(diào)整到指定的寬度和高度。：把窗口的大小調(diào)整到指定的寬度和高度。 moveBy()moveBy()：可相對窗口的當(dāng)前坐標(biāo)把它移動指定的像素。：可相對窗口的當(dāng)前坐標(biāo)把它移動指定的像素。 moveTo()moveTo()：把窗口的左上角移動到一個指定的坐標(biāo)。：把窗口的左上角移動到一個指定的坐標(biāo)。 setInterval()setInterval()：按照指定的周期（以毫秒計）來調(diào)用函數(shù)或：按照指定的周期（以毫秒計）來調(diào)用函數(shù)

8、或計算表達(dá)式。計算表達(dá)式。 setTimeout()setTimeout()：在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達(dá)式。：在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達(dá)式。 scrollBy()scrollBy()：按照指定的像素值來滾動內(nèi)容。：按照指定的像素值來滾動內(nèi)容。 scrollTo()scrollTo()：把內(nèi)容滾動到指定的坐標(biāo)：把內(nèi)容滾動到指定的坐標(biāo)。 10.110.1用對象控制用對象控制窗口窗口.2 創(chuàng)建新窗口創(chuàng)建新窗口 windowwindow對象最便利的應(yīng)用之一是創(chuàng)建一個新窗口，可用于在不清對象最便利的應(yīng)用之一是創(chuàng)建一個新窗口，可用于在不清除當(dāng)前窗口的情況下顯示文檔除當(dāng)前

9、窗口的情況下顯示文檔比如彈出廣告（或者游戲說明）。比如彈出廣告（或者游戲說明）。也可以為特定用途創(chuàng)建窗口，比如導(dǎo)航窗口。也可以為特定用途創(chuàng)建窗口，比如導(dǎo)航窗口。 可以使用可以使用window.open()window.open()方法創(chuàng)建一個新的瀏覽器窗口。打開新方法創(chuàng)建一個新的瀏覽器窗口。打開新窗口的典型語句如下所示：窗口的典型語句如下所示： WinObj=WinObj=window.open()window.open()(“URL”, “WindowName”, “Featur (“URL”, “WindowName”, “Featur List”);List”); 以下是以下是windo

10、w.open()window.open()語句中的各個組成部分：語句中的各個組成部分： 1.WinObj1.WinObj變量用于存儲新的變量用于存儲新的windowwindow對象。使用這個名稱，可以訪問新對象。使用這個名稱，可以訪問新對象的方法和屬性。對象的方法和屬性。 2.Window.open()2.Window.open()方法的第方法的第1 1個參數(shù)是一個個參數(shù)是一個URLURL，它將被加載到新的窗，它將被加載到新的窗口中。如果這個參數(shù)為空，則不會加載任何網(wǎng)頁，這時可用口中。如果這個參數(shù)為空，則不會加載任何網(wǎng)頁，這時可用10.110.1用對象控制用對象控制窗口窗口 JavaScrip

11、t JavaScript向窗口填充內(nèi)容；向窗口填充內(nèi)容；3.3.第第2 2個參數(shù)指定一個窗口名稱（這里是個參數(shù)指定一個窗口名稱（這里是WindowNameWindowName）。該參數(shù)被賦予）。該參數(shù)被賦予windowwindow對象的對象的namename屬性，用于引用該窗口；屬性，用于引用該窗口；4.4.第第3 3個參數(shù)是用逗號隔開的可選特性列表?？梢酝ㄟ^選擇是否包含工具個參數(shù)是用逗號隔開的可選特性列表。可以通過選擇是否包含工具欄、狀態(tài)欄和其他屬性，對新窗口進(jìn)行定制?？捎脕韯?chuàng)建與典型瀏覽欄、狀態(tài)欄和其他屬性，對新窗口進(jìn)行定制。可用來創(chuàng)建與典型瀏覽器窗口相去甚遠(yuǎn)的各種器窗口相去甚遠(yuǎn)的各種“懸

12、浮懸浮”窗口。窗口。 window.open()window.open()方法第方法第3 3個參數(shù)中的可選特性包括用于設(shè)定窗口大個參數(shù)中的可選特性包括用于設(shè)定窗口大小的小的widthwidth和和height(height(以像素為單位），以及可設(shè)置為以像素為單位），以及可設(shè)置為yes(1)yes(1)或或no(0)no(0)的幾個特性：的幾個特性：toolbartoolbar、locationlocation、directoriesdirectories、statusstatus、menubarmenubar、scrollbarsscrollbars和和resizableresizable。

13、可以只列出需要改變默認(rèn)設(shè)置的特性?？梢灾涣谐鲂枰淖兡J(rèn)設(shè)置的特性。下面這個實例將創(chuàng)建一個沒有工具欄和狀態(tài)欄的小窗口：下面這個實例將創(chuàng)建一個沒有工具欄和狀態(tài)欄的小窗口： SmallWin=SmallWin=window.openwindow.open(“”,“small”,“width=100,height=120,t(“”,“small”,“width=100,height=120,toolbar=0,status=0”);oolbar=0,status=0”); 10.110.1用對象控制用對象控制窗口窗口10.1.310.1.3 打開和關(guān)閉窗口打開和關(guān)閉窗口 窗口是可以關(guān)閉的，窗口是可以

14、關(guān)閉的，window.close()window.close()方法用于關(guān)閉窗口。瀏覽器方法用于關(guān)閉窗口。瀏覽器一般不允許在未得到用戶許可的情況下關(guān)閉主瀏覽器窗口；這個方法一般不允許在未得到用戶許可的情況下關(guān)閉主瀏覽器窗口；這個方法的主要用途是關(guān)閉自己創(chuàng)建的窗口。舉例來說，下面這條語句用于關(guān)的主要用途是關(guān)閉自己創(chuàng)建的窗口。舉例來說，下面這條語句用于關(guān)閉一個名為閉一個名為updatewindowupdatewindow的窗口：的窗口： updatewindow.updatewindow.close()close(); ; Eg. Eg.下面所示的下面所示的HTMLHTML文檔將允許用戶通過單擊一

15、個按鈕打開一個新的小文檔將允許用戶通過單擊一個按鈕打開一個新的小窗口，然后單擊另一個按鈕關(guān)閉該窗口。第窗口，然后單擊另一個按鈕關(guān)閉該窗口。第3 3個按鈕用于嘗試關(guān)閉當(dāng)個按鈕用于嘗試關(guān)閉當(dāng)前窗口，（能否成功取決于所用瀏覽器及其設(shè)置。如果可以關(guān)閉當(dāng)前前窗口，（能否成功取決于所用瀏覽器及其設(shè)置。如果可以關(guān)閉當(dāng)前窗口，大多數(shù)瀏覽器都會先要求確認(rèn)該操作。）窗口，大多數(shù)瀏覽器都會先要求確認(rèn)該操作。） Create a New Window Create a New Window 10.110.1用對象控制用對象控制窗口窗口 Create a New Window Create a New Window U

16、se the buttons below to test opening and closing windows Use the buttons below to test opening and closing windows in JavaScript.in JavaScript. input TYPE=button VALUE=Open New Window toolbar=no,status=no,width=200,height=100); input TYPE=button VALUE=Close New Window onClick=NewWin.close(); input T

17、YPE=button VALUE=Close Main Window onClick=window.close(); Have fun! Have fun! 10.210.2移動和調(diào)整窗口大小移動和調(diào)整窗口大小10.2 移動和調(diào)整窗口大小移動和調(diào)整窗口大小 DOMDOM也允許移動和調(diào)整窗口大小。下列方法可用于移動和調(diào)整任也允許移動和調(diào)整窗口大小。下列方法可用于移動和調(diào)整任何何windowwindow對象：對象： 1.window.moveTo()1.window.moveTo()可把窗口移動到一個新的位置，其參數(shù)指定新的可把窗口移動到一個新的位置，其參數(shù)指定新的x x軸（列）和軸（列）和y y

18、軸（行）的位置；軸（行）的位置； 2.window.moveBy()2.window.moveBy()相對于當(dāng)前位置移動窗口，其相對于當(dāng)前位置移動窗口，其x x和和y y參數(shù)可以為正參數(shù)可以為正值，也可以為負(fù)值，與當(dāng)前位置的值相加，得出新的位置；值，也可以為負(fù)值，與當(dāng)前位置的值相加，得出新的位置； 3.window.resizeTo()3.window.resizeTo()把窗口調(diào)整為指定的寬度和高度；把窗口調(diào)整為指定的寬度和高度； 4.window.resizeBy()4.window.resizeBy()相對于當(dāng)前尺寸調(diào)整窗口大小，其參數(shù)用于修相對于當(dāng)前尺寸調(diào)整窗口大小，其參數(shù)用于修改當(dāng)前

19、的寬度和高度；改當(dāng)前的寬度和高度； Eg.Eg.下面所示的下面所示的HTMLHTML文檔含有允許調(diào)整主窗口大?。ɑ蛞苿铀┑暮唵挝臋n含有允許調(diào)整主窗口大?。ɑ蛞苿铀┑暮唵文_本。腳本。10.210.2移動和調(diào)整窗口大移動和調(diào)整窗口大小小 Moving and resizing windows Moving and resizing windows function DoIt() function DoIt() if (document.form1.w.value & document.form1.h.value) if (document.form1.w.value & doc

20、ument.form1.h.value) self.resizeTo(document.form1.w.value,document.form1.h.value); self.resizeTo(document.form1.w.value,document.form1.h.value); if (document.form1.x.value & document.form1.y.value) if (document.form1.x.value & document.form1.y.value) self.moveTo(document.form1.x.value,docume

21、nt.form1.y.value); self.moveTo(document.form1.x.value,document.form1.y.value); Moving and Resizing Windows Moving and Resizing Windows 10.210.2移動和調(diào)整窗口大小移動和調(diào)整窗口大小 Width: Width: Height: Height: X-position: X-position: Y-position: Y-position: 在本例中，單擊在本例中，單擊Change WindowChange Window按鈕時，按鈕時，DoIt()DoIt()

22、函數(shù)將被作為事件函數(shù)將被作為事件處理程序來調(diào)用。該函數(shù)檢查是否已指定寬度和高度值。如果已經(jīng)指處理程序來調(diào)用。該函數(shù)檢查是否已指定寬度和高度值。如果已經(jīng)指定，它會使用定，它會使用self.resizeTo()self.resizeTo()方法來調(diào)整當(dāng)前窗口的大小。同樣，方法來調(diào)整當(dāng)前窗口的大小。同樣，如果已經(jīng)指定了如果已經(jīng)指定了x x和和y y值，它會使用值，它會使用self.moveTo()self.moveTo()來移動當(dāng)前窗口。來移動當(dāng)前窗口。10.3使用超時功能使用超時功能10.3 使用超時功能使用超時功能 有時最難的事是讓腳步在特定的時段內(nèi)什么也不做。幸運的是，有時最難的事是讓腳步在特

23、定的時段內(nèi)什么也不做。幸運的是，JavaScriptJavaScript含有一個針對此用途的內(nèi)置函數(shù)。用含有一個針對此用途的內(nèi)置函數(shù)。用window.setTimeoutwindow.setTimeout方法，可以指定一個延時以及延時之后開始執(zhí)行的指令。方法，可以指定一個延時以及延時之后開始執(zhí)行的指令。 調(diào)用調(diào)用setTimeout()setTimeout()方法，即可啟動一個超時功能。該方法有兩個方法，即可啟動一個超時功能。該方法有兩個參數(shù)，第參數(shù)，第1 1個是括在引號中的一條（或一組）個是括在引號中的一條（或一組）JavaScriptJavaScript語句，第語句，第2 2個個是以毫秒（

24、千分之一秒）為單位的等待時間。舉例來說，下面這條語是以毫秒（千分之一秒）為單位的等待時間。舉例來說，下面這條語句將在句將在1010秒后顯示一個警告對話框：秒后顯示一個警告對話框： ident=ident=window.setTimeoutwindow.setTimeout(“alert(Times up!)”,10000);(“alert(Times up!)”,10000); 超時功能的標(biāo)識符存放在一個變量（本例中是超時功能的標(biāo)識符存放在一個變量（本例中是identident）里?？梢栽O(shè)）里?？梢栽O(shè)置多個超時，每個都有自己的標(biāo)識符。在超時期限到期之前，可以使置多個超時，每個都有自己的標(biāo)識符。

25、在超時期限到期之前，可以使10.3使用超時功能使用超時功能 用用clearTimeout()clearTimeout()方法指定要停止的超時期限的標(biāo)識符來停止它：方法指定要停止的超時期限的標(biāo)識符來停止它： window.window.clearTimeoutclearTimeout(ident);(ident);Eg.使用超時功能更新頁面使用超時功能更新頁面 重復(fù)超時功能的方法是，在該超時期限調(diào)用的函數(shù)中再次調(diào)用重復(fù)超時功能的方法是，在該超時期限調(diào)用的函數(shù)中再次調(diào)用setTimeoutsetTimeout（）方法。下面的程序顯示的是一個演示重復(fù)超時功能（）方法。下面的程序顯示的是一個演示重復(fù)超

26、時功能 的的HTMLHTML文檔。文檔。 Timeout ExampleTimeout Example var counter=0; var counter=0; ID=window.setTimeout(Update();,2000); ID=window.setTimeout(Update();,2000); function Update() function Update() counter+; counter+;10.3使用超時功能使用超時功能 document.form1.input1.value=The counter is now at+counter;document.for

27、m1.input1.value=The counter is now at+counter; ID=window.setTimeout(Update();,2000); ID=window.setTimeout(Update();,2000); Timeout Example Timeout Example The text value below is being updated every two seconds. The text value below is being updated every two seconds. Press the RESET button to resta

28、rt the count,or the STOP button to Press the RESET button to restart the count,or the STOP button to stop it.stop it. input TYPE=button VALUE=STOP onClick=window.clearTimeout(ID); 10.410.4顯示對話框顯示對話框 這個程序每這個程序每2 2秒在一個文本字段里顯示一則消息，包括一個每次秒在一個文本字段里顯示一則消息，包括一個每次遞增的計數(shù)器。單擊遞增的計數(shù)器。單擊ResetReset按鈕，可以重新開始計數(shù)；單擊按鈕

29、，可以重新開始計數(shù)；單擊StopStop按鈕按鈕，可停止計數(shù)。，可停止計數(shù)。 在頁面載入時，這個腳本將調(diào)用在頁面載入時，這個腳本將調(diào)用setTimeout()setTimeout()方法，而且每次方法，而且每次更新都會再調(diào)用它。更新都會再調(diào)用它。Update()Update()函數(shù)執(zhí)行更新、為計數(shù)器加函數(shù)執(zhí)行更新、為計數(shù)器加1 1和并設(shè)置和并設(shè)置下一個超時功能。下一個超時功能。ResetReset按鈕可把計數(shù)器設(shè)置為按鈕可把計數(shù)器設(shè)置為0 0，StopStop按鈕演示按鈕演示clearTimeout()clearTimeout()方法。方法。10.4 10.4 顯示對話框顯示對話框 windo

30、wwindow對象含有對象含有3 3個方法，適用于顯示消息并與用戶交互。這里個方法，適用于顯示消息并與用戶交互。這里簡要的介紹一下：簡要的介紹一下：1.window.alert(message)1.window.alert(message)用于顯示警告對話框。用于顯示警告對話框。2.window.confirm(message)2.window.confirm(message)用于顯示確認(rèn)對話框，除一則消息外，還用于顯示確認(rèn)對話框，除一則消息外，還10.410.4顯示對話框顯示對話框 有有“確定確定”和和“取消取消”按鈕。按鈕。 3.mpt(message,default)

31、3.mpt(message,default)用于顯示一則消息，并提醒用戶用于顯示一則消息，并提醒用戶輸入。它返回用戶輸入的文本。如果用戶未輸入任何內(nèi)容，則使用默輸入。它返回用戶輸入的文本。如果用戶未輸入任何內(nèi)容，則使用默認(rèn)值。認(rèn)值。 若想使用若想使用confirm()confirm()和和prompt()prompt()方法，需要用一個變量來接收用戶方法，需要用一個變量來接收用戶的響應(yīng)。例如，下面這條語句顯示一則提示消息，并把用戶輸入的文的響應(yīng)。例如，下面這條語句顯示一則提示消息，并把用戶輸入的文本存儲在本存儲在texttext變量中：變量中： text=window.pr

32、ompt(“Enter some text”, “Default value”);text=mpt(“Enter some text”, “Default value”);Eg.Eg.創(chuàng)建顯示對話框的腳本創(chuàng)建顯示對話框的腳本 為進(jìn)一步演示這類對話框，用戶可以使用下面這個為進(jìn)一步演示這類對話框，用戶可以使用下面這個HTMLHTML文檔中的按文檔中的按鈕和事件處理程序測試對話框。鈕和事件處理程序測試對話框。10.410.4顯示對話框顯示對話框 Alerts, Confirmations, and Prompts Alerts, Confirmations, and Prompt

33、s Alters, Confirmations, and Prompts Alters, Confirmations, and Prompts Use the buttons below to test dialogs in JavaScript. Use the buttons below to test dialogs in JavaScript. input TYPE=button VALUE=Display an Alert onClick=window.alert(This is a test alert.); input TYPE=button VALUE=Display a Co

34、nfirmation onClick=window.confirm(Would you like to confirm?); input TYPE=button VALUE=Display a Prompt“ value); Have fun! Have fun! 10.510.5使用框架使用框架.1 為框架使用為框架使用JavaScriptJavaScript對象對象 在一個窗口含有多個框架時，每個框架在在一個窗口含有多個框架時，每個框架在JavaScriptJavaScript中都由一個中都由一個frameframe對象表示。該對象等效于對象表示。該對象等效于windowwindow對象，但是用于專門處理框架對象，但是用于專門處理框架。FrameFrame對象的名稱與在對象的名稱與在標(biāo)簽中指定的標(biāo)簽中指定的NAMENAME屬性相同。屬性相同。 在使用框架時，關(guān)鍵字在使用框架時，關(guān)鍵字windowwindow和和self