Javascript之BOM(window對(duì)象)詳解_

1、Javascript之BOM(window對(duì)象)詳解_ 下面我就為大家?guī)?lái)一篇Javascript之BOM(window對(duì)象)詳解。我覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。 ECMAScript是JavaScript的核心，但在web用法JavaScript，那么BOM(掃瞄器對(duì)象模型)才是真正的核心。 BOM的核心對(duì)象是window，它表示掃瞄器的一個(gè)實(shí)例。 在掃瞄器中，window對(duì)象既是JavaScript訪問(wèn)掃瞄器窗口的一個(gè)接口，又是ECMAScript規(guī)定的Global對(duì)象。也就是說(shuō)，在網(wǎng)頁(yè)中定義的任何一個(gè)變量、對(duì)象和函數(shù)以window作為其Global對(duì)象。 1.全局作用

2、域 既然window對(duì)象扮演著Global對(duì)象，那么全部在全局作用域中聲明的對(duì)象、變量和函數(shù)都會(huì)變成window的屬性和方法。 定義全局變量和在window對(duì)象上定義屬性還是有差別的：全局變量不能通過(guò)delete刪除，而在window對(duì)象上定義的屬性則可以。 var age=28; window.color=red; /在IE9是拋出錯(cuò)誤，在其他掃瞄器中都返回false delete window.age; /在IE9是拋出錯(cuò)誤，在其他掃瞄器中都返回true delete window.color; /return true alert(window.age); /28 alert(windo

3、w.color); /undefined 在用法var語(yǔ)句添加window屬性時(shí)，有一個(gè)名為Configurable的特性，這個(gè)特性的值被設(shè)置為false,因此這樣定義的屬性不行以通過(guò)delete刪除。 在嘗試訪問(wèn)未聲明的變量會(huì)拋出錯(cuò)誤，但通過(guò)查詢window對(duì)象，可以知道某個(gè)可能未聲明的變量是否存在。 /這里拋出錯(cuò)誤，由于oldValue未聲明 var newValue=oldValue; /這里不會(huì)拋出錯(cuò)誤，由于這是一次屬性查詢 var newValue=window.oldValue / alert(newValue); /undefined 其實(shí)許多全局JavaScript對(duì)象如loc

4、altion和navigator事實(shí)上都是window對(duì)象的屬性。 2.窗口關(guān)系及框架 假如頁(yè)面中包含框架，則每個(gè)框架都有自己的window對(duì)象，并保存在frames集合中。 在frame集合中，可以通過(guò)數(shù)值索引或框架名來(lái)進(jìn)行訪問(wèn)。 html head titleFrameset Example/title /head frameset rows=160,* frame src=frame.htm name=topFrame frameset cols=50%,50% frame src=anotherframe.htm name=leftFrame frame src=yetanotherf

5、rame.htm name=rightFrame /frameset /frameset /html 就這個(gè)例子而言，可以通過(guò)window.frames0或者window.framestopFrame來(lái)引用上方框架。不過(guò)最好用法top.frames0來(lái)訪問(wèn)框架。 top對(duì)象始終指向最高(外)層框架，也就是掃瞄器窗口。用法它可以確保在一個(gè)框架中正確地訪問(wèn)另一個(gè)框架。 與top對(duì)象相對(duì)的還有另一個(gè)window對(duì)象是parent,parent（父）對(duì)象始終指向當(dāng)前框架的挺直上層框架。 還有一個(gè)self對(duì)象，它始終指向window,事實(shí)上self與window可以相互用法，引入self對(duì)象的目的就只是

6、為了與top和parent對(duì)象對(duì)應(yīng)起來(lái)。 全部的這些對(duì)象，都是window的屬性，可以用法window.parent或window.top用法它們。 3.窗口位置 多數(shù)掃瞄器都供應(yīng)了screenLeft和screenTop,分別用于表示窗口相對(duì)與屏幕左邊和上邊的位置。FF則在screenX和screenY屬性中供應(yīng)相同的窗口信息，Safari金額Chorme也同時(shí)支持這兩個(gè)屬性。 用法下面代碼可以跨掃瞄器取得窗口左邊和上邊的位置。 var leftPos=(typeof window.screenLeft=number)?window.screenLeft:window.screenX; va

7、r topPos=(typeof window.screenTop=number)?window.screenTop:window.screenY; 值得留意的是，在IE和Opera中screenLeft和screenTop中保存的是從屏幕左邊和上邊到window對(duì)象表示的頁(yè)面可見(jiàn)區(qū)域的距離。在Chrome、FF和Safari中，screenY和screenTop中保存的是整個(gè)掃瞄器對(duì)于屏幕的坐標(biāo)值。 最終結(jié)果就是無(wú)法在跨掃瞄器條件下取得窗口左邊和上邊的精確坐標(biāo)值。 用法moveTo()和moveBy()方法倒是可以將窗口精確的移動(dòng)到新位置，兩個(gè)方法都接收兩個(gè)參數(shù)，moveTo()接收的是x,

8、y軸的坐標(biāo)，moveBy()接收的是移動(dòng)的像素。 /將屏幕移動(dòng)到左上方 moveTo(0,0); /將窗口左移50px moveBy(-50,0); 但是，這兩個(gè)方法可能會(huì)被掃瞄器禁用。這兩個(gè)方法也只適用于最外層的window對(duì)象，不適用框架。 4.窗口大小 主流掃瞄器都為確定窗口大小供應(yīng)了4個(gè)屬性：innerWidth、innerHight、outerWidth和outerHight。 在IE9+、Safari和FF中，outerWidth和outerHight返回的是掃瞄器窗口本身的尺寸(無(wú)論從哪個(gè)框架訪問(wèn)),但在Opera中，這兩個(gè)屬性的值表示頁(yè)面視圖容器的大小(單個(gè)標(biāo)簽頁(yè)窗口的大小)。

9、而innerWidth、innerHight則表示該容器中頁(yè)面視圖的大?。p去邊框的寬度）。但在Chrome中，這4個(gè)屬性都表示視口大小而非掃瞄器大小。 IE9之前沒(méi)有供應(yīng)取得掃瞄器窗口尺寸的屬性；不過(guò)它通過(guò)DOM供應(yīng)了頁(yè)面可視區(qū)域的信息。 在IE、FF、Chrome、Opera和Safari中，document.documentElement.clientWidth和document.documentElement.clientHight中保存著頁(yè)面視口信息。在IE6下，要在標(biāo)準(zhǔn)模式下有效。假如是混雜模式就必需通過(guò)document.body.clientWidth和document.body

10、.clientHight取得相同信息。Chrome則不分標(biāo)準(zhǔn)模式還是混雜模式。 雖然最終無(wú)法確定掃瞄器窗口本身的大小，但卻可以取得頁(yè)面視口的大小。 var pageWidth = window.innerWidth, pageHeight = window.innerHeight; if (typeof pageWidth != number) if (patMode = CSS1Compat) pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight

11、; else pageWidth = document.body.clientWidth; pageHeight = document.body.clientHeight; alert(Width: + pageWidth); alert(Height: + pageHeight); 對(duì)于移動(dòng)設(shè)備，window.innerWidth和window.innerHight保存著可見(jiàn)視口，也就是屏幕上頁(yè)面區(qū)域的大小。移動(dòng)IE掃瞄器則要通過(guò)document.documentElement.clientWidth和document.documentElement.clientHight獵取相同信息。 用

12、法resizeTo()和resizeBy()方法都可以調(diào)整掃瞄器窗口大小，兩個(gè)方法都接收兩個(gè)參數(shù)，resizeTo()接收的是掃瞄器窗口新寬度和新高度，resizeBy()接收的是新窗口和老窗口的寬度差和高度差。 /調(diào)整到100*100 resizeTo(100,100); /調(diào)整到200*150 moveBy(100,50); 但是，這兩個(gè)方法可能會(huì)被掃瞄器禁用。這兩個(gè)方法也只適用于最外層的window對(duì)象，不適用框架。 5.導(dǎo)航和打開(kāi)窗口 window.open()方法既可以打開(kāi)一個(gè)特定的URL，也可以打開(kāi)一個(gè)新的掃瞄器窗口。該方法接收4個(gè)參數(shù)：URL，窗口目標(biāo)，一個(gè)特性字符串和一個(gè)表示新

13、頁(yè)面是否取代當(dāng)前頁(yè)面的布爾值。 彈出窗口 各項(xiàng)參數(shù) 其中yes/no也可用法1/0；pixelvalue為具體的數(shù)值，單位象素。 參數(shù)|取值范圍|說(shuō)明 alwaysLowered|yes/no|指定窗口隱蔽在全部窗口之后 alwaysRaised|yes/no|指定窗口懸浮在全部窗口之上 depended|yes/no|是否和父窗口同時(shí)關(guān)閉 directories|yes/no|Nav2和3的名目欄是否可見(jiàn) height|pixelvalue|窗口高度 hotkeys|yes/no|在沒(méi)菜單欄的窗口中設(shè)平安退出熱鍵 innerHeight|pixelvalue|窗口中文檔的像素高度 inner

14、Width|pixelvalue|窗口中文檔的像素寬度 location|yes/no|位置欄是否可見(jiàn) menubar|yes/no|菜單欄是否可見(jiàn) outerHeight|pixelvalue|設(shè)定窗口(包括裝飾邊框)的像素高度 outerWidth|pixelvalue|設(shè)定窗口(包括裝飾邊框)的像素寬度 resizable|yes/no|窗口大小是否可調(diào)整 screenX|pixelvalue|窗口距屏幕左邊界的像素長(zhǎng)度 screenY|pixelvalue|窗口距屏幕上邊界的像素長(zhǎng)度 scrollbars|yes/no|窗口是否可有滾動(dòng)欄 titlebar|yes/no|窗口題目欄是否

15、可見(jiàn) toolbar|yes/no|窗口工具欄是否可見(jiàn) Width|pixelvalue|窗口的像素寬度 z-look|yes/no|窗口被激活后是否浮在其它窗口之上 示例： window.open(page.html,newwindow,height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no) 腳本運(yùn)行后，page.html將在新窗體newwindow中打開(kāi)，寬為100，高為400，距屏頂0象素，屏左0象素，無(wú)工具條，無(wú)菜單條，無(wú)滾動(dòng)條，不

16、行調(diào)整大小，無(wú)地址欄，無(wú)狀態(tài)欄。 6.間歇調(diào)用和超時(shí)調(diào)用 JavaScript是單線程語(yǔ)言，但它允許通過(guò)設(shè)置超時(shí)值和間歇時(shí)間來(lái)調(diào)度代碼在特定時(shí)刻執(zhí)行。前者是在指定的時(shí)間過(guò)后執(zhí)行代碼，后者則是每個(gè)指定的時(shí)間就調(diào)用一次。 超時(shí)調(diào)用setTimeout() setTimeout() 方法接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是函數(shù)，其次個(gè)參數(shù)是時(shí)間（單位微秒），返回?cái)?shù)值ID。 setTimeout( function () alert(你好!); ,1000); 調(diào)用setTimeout()后該方法會(huì)返回一個(gè)數(shù)值ID，表示超時(shí)調(diào)用，可以通過(guò)它取消超時(shí)調(diào)用。 var timeOutId = setTimeout(

17、function () alert(你好!); ,1000); clearTimeout(timeOutId); 間歇調(diào)用setInterval() setInterval()方法接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是函數(shù)，其次個(gè)參數(shù)是時(shí)間（單位微秒），返回?cái)?shù)值ID setInterval( function () alert(你好!); ,1000); 取消調(diào)用clearInterval()，接受一個(gè)參數(shù)間歇調(diào)用ID var intervalId = null; var span = document.createElement(span); /創(chuàng)建span節(jié)點(diǎn) span.Id=time; /設(shè)置spa

18、n的id document.body.appendChild(span); /body內(nèi)添加span function incrementNumber () var now = new Date(); var timeStr = now.toLocaleTimeString(); span.innerText =timeStr; num+; if (num = 10) clearInterval(intervalId); /十秒后時(shí)間不變了 intervalId = setInterval(incrementNumber,1000); 盡量用超時(shí)調(diào)用替代間歇調(diào)用 var num = 0; var max = 10; function incrementNumber() num+; if (nummax) setTimeout(incrementNumber,1000); else alert(OK); set