第十四章 JavaScript_Window對(duì)象

1、JavaScriptJavaScript08 window08 window對(duì)象對(duì)象WEB基礎(chǔ)目標(biāo)vwindow對(duì)象 vwindow對(duì)象屬性及方法 v對(duì)話框 v狀態(tài)欄 v窗口操作 v超時(shí)與時(shí)間間隔 v框架操作 瀏覽器對(duì)象簡(jiǎn)介http:/Window 窗口對(duì)象location地址對(duì)象document文檔對(duì)象FORM表單對(duì)象瀏覽器對(duì)象的分層結(jié)構(gòu)window.document.myform.text1 q瀏覽器對(duì)象的分層結(jié)構(gòu)瀏覽器對(duì)象的分層結(jié)構(gòu)瀏覽器對(duì)象簡(jiǎn)介window對(duì)象 v window對(duì)象介紹對(duì)象介紹 q簡(jiǎn)而言之，window對(duì)象是瀏覽器窗口對(duì)文檔提供一個(gè)顯示的容器，是每一個(gè)加載文檔的父對(duì)象。

2、window對(duì)象還是所有其他對(duì)象的頂級(jí)對(duì)象，通過(guò)對(duì)window對(duì)象的子對(duì)象進(jìn)行操作，可以實(shí)現(xiàn)更多的動(dòng)態(tài)效果。v window對(duì)象的使用方法對(duì)象的使用方法 qwindow對(duì)象代表當(dāng)前打開(kāi)的瀏覽器窗口，其作為頂級(jí)對(duì)象。window對(duì)象的方法和屬性的調(diào)用和其它對(duì)象一樣，區(qū)別是window對(duì)象不需要?jiǎng)?chuàng)建即可直使用。需要注意的是window對(duì)象名稱(chēng)是小寫(xiě)。q常用屬性 名稱(chēng)名稱(chēng) 說(shuō)明說(shuō)明 document表示給定瀏覽器窗口中的 HTML 文檔。 history 包含有關(guān)客戶訪問(wèn)過(guò)的URL的信息。location包含有關(guān)當(dāng)前 URL 的信息。 name設(shè)置或檢索窗口或框架的名稱(chēng)。 status 設(shè)置或檢索窗

3、口底部的狀態(tài)欄中的消息。 screen包含有關(guān)客戶端的屏幕和顯示性能的信息。 window對(duì)象屬性q常用屬性 window對(duì)象屬性名稱(chēng)名稱(chēng) 說(shuō)明說(shuō)明 outerHeight窗口邊界的垂直尺寸，pxouterWidth窗口邊界的水平尺寸，pxpageXOffset網(wǎng)頁(yè)x-position的位置pageYOffset網(wǎng)頁(yè)y-position的位置innerHeight窗口內(nèi)容區(qū)的垂直尺寸，pxinnerWidth窗口內(nèi)容區(qū)的水平尺寸，pxscreenX窗口左邊界的X坐標(biāo)screenY窗口上邊界的Y坐標(biāo)v常用方法名稱(chēng) 說(shuō)明 alert (提示信息)顯示一個(gè)帶有提示信息和確定按鈕的對(duì)話框 confir

4、m(提示信息“)顯示一個(gè)帶有提示信息、確定和取消按鈕的對(duì)話框 open (url,name)打開(kāi)具有指定名稱(chēng)的新窗口，并加載給定 URL 所指定的文檔；如果沒(méi)有提供 URL，則打開(kāi)一個(gè)空白文檔close ( )關(guān)閉當(dāng)前窗口showModalDialog( )在一個(gè)模式窗口中顯示指定的HTML文檔prompt(提示字串，默認(rèn)值) 顯示提示信息，并提供可輸入的字段window對(duì)象方法v常用方法名稱(chēng) 說(shuō)明 setTimeout(函數(shù),毫秒數(shù)) 設(shè)置延時(shí)器：經(jīng)過(guò)指定毫秒值后執(zhí)行某個(gè)函數(shù) clearTimeout(延時(shí)器對(duì)象)移除延時(shí)器setInterval(表達(dá)式，毫秒)設(shè)置定時(shí)器：經(jīng)過(guò)指定毫秒值后執(zhí)

5、行某個(gè)函數(shù) clearInterval(定時(shí)器對(duì)象)移除定時(shí)器resizeTo(寬度，高度)絕對(duì)調(diào)整窗口大小window對(duì)象方法使用使用window對(duì)象對(duì)象function openwindow( ) window.status=系統(tǒng)當(dāng)前狀態(tài)：您正在注冊(cè)用戶系統(tǒng)當(dāng)前狀態(tài)：您正在注冊(cè)用戶.; if (window.screen.width = 1024 & window.screen.height = 768) window.open(register.html); else window.alert(請(qǐng)?jiān)O(shè)置分辨率為請(qǐng)?jiān)O(shè)置分辨率為1024x768，然后再打開(kāi)，然后再打開(kāi)); functi

6、on closewindow( ) if(window.confirm(您確認(rèn)要退出系統(tǒng)嗎？您確認(rèn)要退出系統(tǒng)嗎？) window.close( ); 在窗口狀態(tài)欄在窗口狀態(tài)欄中設(shè)置文本中設(shè)置文本設(shè)置窗口設(shè)置窗口的高度的高度使用使用open方法方法打開(kāi)新窗口打開(kāi)新窗口彈出警告對(duì)話框彈出警告對(duì)話框彈出確認(rèn)對(duì)話框彈出確認(rèn)對(duì)話框關(guān)閉當(dāng)關(guān)閉當(dāng)前窗口前窗口添加單添加單擊事件擊事件因?yàn)橐驗(yàn)閣indow是最頂層的根，所以可以省略是最頂層的根，所以可以省略window.open(google.htm);可簡(jiǎn)寫(xiě)為：可簡(jiǎn)寫(xiě)為：open(google.htm);close( )方法也是如此。方法也是如此。使用使用wi

7、ndow對(duì)象對(duì)象open（”打開(kāi)窗口的打開(kāi)窗口的url”，”窗口名窗口名”，”窗口特征窗口特征”）窗口的特征如下，可以任意組合：窗口的特征如下，可以任意組合：height： 窗口高度；窗口高度； width： 窗口寬度；窗口寬度； top： 窗口距離屏幕上方的象素值；窗口距離屏幕上方的象素值； left：窗口距離屏幕左側(cè)的象素值；：窗口距離屏幕左側(cè)的象素值； toolbar： 是否顯示工具欄，是否顯示工具欄，yes為顯示；為顯示； menubar，scrollbars 表示菜單欄和滾動(dòng)欄。表示菜單欄和滾動(dòng)欄。 resizable： 是否允許改變窗口大小，是否允許改變窗口大小，yes或或1為允許

8、為允許 location： 是否顯示地址欄，是否顯示地址欄，yes或或1為允許為允許 status：是否顯示狀態(tài)欄內(nèi)的信息，：是否顯示狀態(tài)欄內(nèi)的信息，yes或或1為允許；為允許；我們需要預(yù)先制作好注冊(cè)頁(yè)面，假設(shè)為我們需要預(yù)先制作好注冊(cè)頁(yè)面，假設(shè)為register.html，打開(kāi)注冊(cè)窗口的語(yǔ)句如下，打開(kāi)注冊(cè)窗口的語(yǔ)句如下 open(register.html, 注冊(cè)窗口注冊(cè)窗口, toolbars=0, location=0, statusbars=0,menubars=0,width=700,height=550,scrollbars=1);通過(guò)通過(guò)open方法方法打開(kāi)注冊(cè)頁(yè)面打開(kāi)注冊(cè)頁(yè)面之后

9、的效果之后的效果使用Window對(duì)象對(duì)象function openwindow( ) window.status=系統(tǒng)當(dāng)前狀態(tài)：您正在注冊(cè)用戶系統(tǒng)當(dāng)前狀態(tài)：您正在注冊(cè)用戶.; if (window.screen.width = 1024 & window.screen.height = 768) open(register.html, 注冊(cè)窗口注冊(cè)窗口, toolbars=0, location=0, statusbars=0, menubars=0,width=700,height=550,scrollbars=1); else window.alert(請(qǐng)?jiān)O(shè)置分辨率為請(qǐng)?jiān)O(shè)置分辨率為

10、1024x768，然后再打開(kāi)，然后再打開(kāi)); function closewindow( ) if(window.confirm(您確認(rèn)要退出系統(tǒng)嗎？您確認(rèn)要退出系統(tǒng)嗎？) window.close( ); 使用使用 Open 方法方法打開(kāi)注冊(cè)新窗口打開(kāi)注冊(cè)新窗口添加單添加單擊事件擊事件使用Window對(duì)象對(duì)象function openwindow( ) window.status=系統(tǒng)當(dāng)前狀態(tài)：您正在注冊(cè)用戶系統(tǒng)當(dāng)前狀態(tài)：您正在注冊(cè)用戶.; if (window.screen.width = 1024 & window.screen.height = 768) open(regist

11、er.html, 注冊(cè)窗口注冊(cè)窗口, toolbars=0, location=0, statusbars=0, menubars=0,width=700,height=550,scrollbars=1); else window.alert(請(qǐng)?jiān)O(shè)置分辨率為請(qǐng)?jiān)O(shè)置分辨率為1024x768，然后再打開(kāi)，然后再打開(kāi));function closewindow( ) if(window.confirm(您確認(rèn)要退出系統(tǒng)嗎？您確認(rèn)要退出系統(tǒng)嗎？) window.close( ); 用戶注冊(cè)用戶注冊(cè) 退退 出出使用超鏈接調(diào)使用超鏈接調(diào)用方法來(lái)打開(kāi)用方法來(lái)打開(kāi)注冊(cè)新窗口注冊(cè)新窗口使用Window對(duì)象對(duì)象-

12、模式窗口模式窗口function openwindow( ) window.status=系統(tǒng)當(dāng)前狀態(tài)：您正在注冊(cè)用戶系統(tǒng)當(dāng)前狀態(tài)：您正在注冊(cè)用戶.; if (window.screen.width = 1024 & window.screen.height = 768) window.showModalDialog(register.html, 注冊(cè)窗口注冊(cè)窗口, toolbars=0, location=0, statusbars=0, menubars=0,width=700, height=550,scrollbars=1); else window.alert(請(qǐng)?jiān)O(shè)置分辨率為

13、請(qǐng)?jiān)O(shè)置分辨率為1024x768，然后再打開(kāi)，然后再打開(kāi)); function closewindow( ) if(window.confirm(您確認(rèn)要退出系統(tǒng)嗎？您確認(rèn)要退出系統(tǒng)嗎？) window.close( ); H3用戶注冊(cè)用戶注冊(cè) 退退 出出打開(kāi)模式窗口，打開(kāi)模式窗口，被打開(kāi)窗口保持被打開(kāi)窗口保持輸入焦點(diǎn)。輸入焦點(diǎn)。使用超鏈接調(diào)使用超鏈接調(diào)用方法來(lái)打開(kāi)用方法來(lái)打開(kāi)模式窗口模式窗口對(duì)話框?qū)υ捒騫 輸入對(duì)話框輸入對(duì)話框 q 很多情況下需要向網(wǎng)頁(yè)中的程序輸入數(shù)據(jù)，簡(jiǎn)單的鼠標(biāo)交互顯然不能滿足。此時(shí)就可以使用window對(duì)象提供的輸入對(duì)話框，通過(guò)該對(duì)話框可以輸入數(shù)據(jù)。通過(guò)window的pro

14、mpt方法即可顯示輸入對(duì)話框，使用方法如下：對(duì)話框?qū)υ捒騰輸入對(duì)話框輸入對(duì)話框?qū)嵗龑?shí)例狀態(tài)欄狀態(tài)欄 v狀態(tài)欄介紹 q 瀏覽器的狀態(tài)欄通常位于窗口的底部，用于顯示一些任務(wù)狀態(tài)信息等。在通常情況下，狀態(tài)顯示當(dāng)前瀏覽器的工作狀態(tài)或用戶交互提示信息 ,如圖所示。狀態(tài)欄v 默認(rèn)狀態(tài)欄信息 q 默認(rèn)情況下，狀態(tài)欄里的信息都是空的，只有在加載網(wǎng)頁(yè)或?qū)⑹髽?biāo)放在超鏈接上時(shí)，狀態(tài)欄中才會(huì)顯示與任務(wù)目標(biāo)相關(guān)的瞬間信息。window對(duì)象的defaultStatus屬性可以用來(lái)設(shè)置在狀態(tài)欄中的默認(rèn)文本，當(dāng)不顯示瞬間信息時(shí)，狀態(tài)欄可以顯示這個(gè)默認(rèn)文本。defaultStatus屬性是一個(gè)可讀寫(xiě)的字符串 。v 狀態(tài)欄瞬間信

15、息 q 在默認(rèn)情況下，將鼠標(biāo)放在一個(gè)超鏈接上時(shí)，狀態(tài)欄會(huì)顯示該超鏈接的URL，此時(shí)的狀態(tài)欄信息就是瞬間信息。當(dāng)鼠標(biāo)離開(kāi)超鏈接時(shí)，狀態(tài)欄就會(huì)顯示默認(rèn)的狀態(tài)欄信息，瞬間信息消失 。超時(shí)與時(shí)間間隔 v 延遲代碼執(zhí)行 q 使用window對(duì)象的setTimeout方法可以延遲代碼的執(zhí)行時(shí)間，也可以用該方法來(lái)指定代碼的執(zhí)行時(shí)間。setTimeout方法的語(yǔ)法代碼如下所示：超時(shí)與時(shí)間間隔超時(shí)與時(shí)間間隔 v 取消延遲執(zhí)行取消延遲執(zhí)行 q window對(duì)象中的對(duì)象中的clearTimeout方法可以取消延方法可以取消延遲執(zhí)行的代碼。因?yàn)樵趯?shí)際應(yīng)用中，如果有時(shí)出遲執(zhí)行的代碼。因?yàn)樵趯?shí)際應(yīng)用中，如果有時(shí)出現(xiàn)特殊情

16、況，不再需要程序自延遲執(zhí)行的時(shí)候，現(xiàn)特殊情況，不再需要程序自延遲執(zhí)行的時(shí)候，就得想辦法取消延遲。就得想辦法取消延遲。clearTimeout方法可以做方法可以做到這一點(diǎn)。語(yǔ)法如下所示：到這一點(diǎn)。語(yǔ)法如下所示：window.clearTimeout(id)01/javascript開(kāi)始02function showClock()/自定義函數(shù)0304d=new Date()/創(chuàng)建一個(gè)時(shí)間對(duì)象05window.status=d.toLocaleString()/在狀態(tài)欄中顯示當(dāng)前時(shí)間06ident=window.setTimeout(showClock(),1000);/設(shè)置1秒鐘更新一次0708

17、09 10 11 12 1.插入一個(gè)層插入一個(gè)層Layer1， z-index=1；2.層中插入一幅圖片。層中插入一幅圖片。3.延時(shí)器函數(shù)setTimeout （）的用法：setTimeout（“調(diào)用的函數(shù)名”，間隔的毫秒數(shù)）表示每隔多少毫秒，就循環(huán)調(diào)用某個(gè)函數(shù)來(lái)執(zhí)行清除某個(gè)延時(shí)器：clearTimeout（）方法。例如：var myclocksetTimeout（”move( )”,500）;if ()clearTimeout（myclock）;；飄浮廣告示例function move( )document.getElementById(Layer1).style.left= Math.ra

18、ndom()*500;document.getElementById(Layer1).style.top= Math.random()*500;setTimeout(move(),1000);隨機(jī)漂浮的廣告定義層圖片移動(dòng)的函數(shù)move( ) 每隔1秒調(diào)用move( )函數(shù)隨機(jī)改變層的位置，從而實(shí)現(xiàn)隨機(jī)漂浮的效果getElementById(“ID名稱(chēng)”) 方法：根據(jù)ID名稱(chēng)獲取HTML元素，這里表示獲取層對(duì)象Layer1。left和top表示層Layer1的左邊距和上邊距，設(shè)定為隨機(jī)的值。飄浮廣告示例代碼超時(shí)與時(shí)間間隔 v周期性執(zhí)行代碼周期性執(zhí)行代碼 q 代碼延遲執(zhí)行機(jī)制在執(zhí)行一次后就失效，而

19、在應(yīng)代碼延遲執(zhí)行機(jī)制在執(zhí)行一次后就失效，而在應(yīng)用中，有時(shí)希望某個(gè)程序能反復(fù)執(zhí)行，比如說(shuō)倒用中，有時(shí)希望某個(gè)程序能反復(fù)執(zhí)行，比如說(shuō)倒計(jì)時(shí)等，需要每秒執(zhí)行一次。為此可以使用計(jì)時(shí)等，需要每秒執(zhí)行一次。為此可以使用window方法的方法的setInterval方法，該函數(shù)設(shè)置一方法，該函數(shù)設(shè)置一個(gè)定時(shí)器，每當(dāng)定時(shí)時(shí)間到時(shí)就調(diào)用一次用戶設(shè)個(gè)定時(shí)器，每當(dāng)定時(shí)時(shí)間到時(shí)就調(diào)用一次用戶設(shè)定的定時(shí)器函數(shù)。定的定時(shí)器函數(shù)。 v停止周期性執(zhí)行代碼停止周期性執(zhí)行代碼 q 使用使用setInterval方法可以設(shè)定計(jì)時(shí)器，設(shè)定計(jì)時(shí)方法可以設(shè)定計(jì)時(shí)器，設(shè)定計(jì)時(shí)器時(shí)將返回一個(gè)計(jì)時(shí)器的引用。當(dāng)不再需要的時(shí)器時(shí)將返回一個(gè)計(jì)時(shí)器的

20、引用。當(dāng)不再需要的時(shí)候可以使用候可以使用clearInterval方法移除計(jì)時(shí)器，其接方法移除計(jì)時(shí)器，其接收一個(gè)計(jì)時(shí)器收一個(gè)計(jì)時(shí)器ID作為參數(shù)，語(yǔ)法如下作為參數(shù)，語(yǔ)法如下：時(shí)鐘代碼時(shí)鐘代碼如何實(shí)現(xiàn)在窗口狀態(tài)欄中顯示時(shí)鐘效果？ 由于時(shí)間在不停地走，所以應(yīng)該每隔1秒調(diào)用顯示時(shí)間的方法。如何解決？使用使用setInterval( )方法方法每隔每隔1秒調(diào)用顯示時(shí)間的方法秒調(diào)用顯示時(shí)間的方法v setInterval的用法：v setInterval （“調(diào)用的函數(shù)”,”定時(shí)的時(shí)間”） v 例：var myTime setInterval( “disptime( )”, 1000 ) ;每隔每隔100

21、0毫秒執(zhí)行函毫秒執(zhí)行函數(shù)數(shù)disptime( )一次一次時(shí)鐘代碼時(shí)鐘代碼function disptime( ) var time = new Date( ); /獲得當(dāng)前時(shí)間獲得當(dāng)前時(shí)間 var hour = time.getHours( ); /獲得小時(shí)、分鐘、秒獲得小時(shí)、分鐘、秒 var minute = time.getMinutes( ); var second = time.getSeconds( ); window.status =hour+:+minute+:+second+ ; var myTime = setInterval(disptime(),1000);設(shè)置狀態(tài)欄的內(nèi)

22、容設(shè)置狀態(tài)欄的內(nèi)容為當(dāng)前時(shí)間為當(dāng)前時(shí)間設(shè)置定時(shí)器每隔設(shè)置定時(shí)器每隔1秒秒(1000毫秒毫秒),調(diào)用函數(shù)調(diào)用函數(shù)disptime()執(zhí)行執(zhí)行框架操作框架操作 v框架介紹框架介紹 q 框架是指一個(gè)瀏覽器窗口中，同時(shí)顯示的多個(gè)相框架是指一個(gè)瀏覽器窗口中，同時(shí)顯示的多個(gè)相互獨(dú)立的網(wǎng)頁(yè)。簡(jiǎn)單的說(shuō)，在上網(wǎng)瀏覽網(wǎng)頁(yè)時(shí)，互獨(dú)立的網(wǎng)頁(yè)。簡(jiǎn)單的說(shuō)，在上網(wǎng)瀏覽網(wǎng)頁(yè)時(shí)，時(shí)常會(huì)看到一些特別的頁(yè)面，這種頁(yè)面將網(wǎng)頁(yè)分時(shí)常會(huì)看到一些特別的頁(yè)面，這種頁(yè)面將網(wǎng)頁(yè)分割成不同的幾個(gè)區(qū)域，這些區(qū)域是相對(duì)獨(dú)立但又割成不同的幾個(gè)區(qū)域，這些區(qū)域是相對(duì)獨(dú)立但又有一定的聯(lián)系的，可以在不同的地方加載不同的有一定的聯(lián)系的，可以在不同的地方加載不同的網(wǎng)頁(yè)，這里所應(yīng)用的正是框架。網(wǎng)頁(yè)，這里所應(yīng)用的正是框架。 q 在在window對(duì)象中有一個(gè)對(duì)象中有一個(gè)frames屬性，該屬性返屬性，該屬性返回一個(gè)數(shù)組，數(shù)組中的元素代表著框架中所包含回一個(gè)數(shù)組，數(shù)組中的元素代表著框架中所