Javascript之BOM(window對象)詳解_

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

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

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

4、altion和navigator事實上都是window對象的屬性。 2.窗口關(guān)系及框架 假如頁面中包含框架，則每個框架都有自己的window對象，并保存在frames集合中。 在frame集合中，可以通過數(shù)值索引或框架名來進(jì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 就這個例子而言，可以通過window.frames0或者window.framestopFrame來引用上方框架。不過最好用法top.frames0來訪問框架。 top對象始終指向最高(外)層框架，也就是掃瞄器窗口。用法它可以確保在一個框架中正確地訪問另一個框架。 與top對象相對的還有另一個window對象是parent,parent（父）對象始終指向當(dāng)前框架的挺直上層框架。 還有一個self對象，它始終指向window,事實上self與window可以相互用法，引入self對象的目的就只是

6、為了與top和parent對象對應(yīng)起來。 全部的這些對象，都是window的屬性，可以用法window.parent或window.top用法它們。 3.窗口位置 多數(shù)掃瞄器都供應(yīng)了screenLeft和screenTop,分別用于表示窗口相對與屏幕左邊和上邊的位置。FF則在screenX和screenY屬性中供應(yīng)相同的窗口信息，Safari金額Chorme也同時支持這兩個屬性。 用法下面代碼可以跨掃瞄器取得窗口左邊和上邊的位置。 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對象表示的頁面可見區(qū)域的距離。在Chrome、FF和Safari中，screenY和screenTop中保存的是整個掃瞄器對于屏幕的坐標(biāo)值。 最終結(jié)果就是無法在跨掃瞄器條件下取得窗口左邊和上邊的精確坐標(biāo)值。 用法moveTo()和moveBy()方法倒是可以將窗口精確的移動到新位置，兩個方法都接收兩個參數(shù)，moveTo()接收的是x,

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

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

10、.clientHight取得相同信息。Chrome則不分標(biāo)準(zhǔn)模式還是混雜模式。 雖然最終無法確定掃瞄器窗口本身的大小，但卻可以取得頁面視口的大小。 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); 對于移動設(shè)備，window.innerWidth和window.innerHight保存著可見視口，也就是屏幕上頁面區(qū)域的大小。移動IE掃瞄器則要通過document.documentElement.clientWidth和document.documentElement.clientHight獵取相同信息。 用

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

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

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

15、可見 toolbar|yes/no|窗口工具欄是否可見 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) 腳本運行后，page.html將在新窗體newwindow中打開，寬為100，高為400，距屏頂0象素，屏左0象素，無工具條，無菜單條，無滾動條，不

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

17、function () alert(你好!); ,1000); clearTimeout(timeOutId); 間歇調(diào)用setInterval() setInterval()方法接受兩個參數(shù)，第一個參數(shù)是函數(shù)，其次個參數(shù)是時間（單位微秒），返回數(shù)值ID setInterval( function () alert(你好!); ,1000); 取消調(diào)用clearInterval()，接受一個參數(shù)間歇調(diào)用ID var intervalId = null; var span = document.createElement(span); /創(chuàng)建span節(jié)點 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); /十秒后時間不變了 intervalId = setInterval(incrementNumber,1000); 盡量用超時調(diào)用替代間歇調(diào)用 var num = 0; var max = 10; function incrementNumber() num+; if (nummax) setTimeout(incrementNumber,1000); else alert(OK); set