Javascript之BOM(window對(duì)象)詳解
ECMAScript是JavaScript的核心，但在web使用JavaScript，那么BOM(瀏覽器對(duì)象模型)才是真正的核心。
BOM的核心對(duì)象是window，它表示瀏覽器的一個(gè)實(shí)例。
在瀏覽器中，window對(duì)象既是JavaScript訪(fǎng)問(wèn)瀏覽器窗口的一個(gè)接口，又是ECMAScript規(guī)定的Global對(duì)象。也就是說(shuō)，在網(wǎng)頁(yè)中定義的任何一個(gè)變量、對(duì)象和函數(shù)以window作為其Global對(duì)象。
1.全局作用域
既然window對(duì)象扮演著Global對(duì)象，那么所有在全局作用域中聲明的對(duì)象、變量和函數(shù)都會(huì)變成window的屬性和方法。
定義全局變量和在window對(duì)象上定義屬性還是有差別的：全局變量不能通過(guò)delete刪除，而在window對(duì)象上定義的屬性則可以。
var age=28; window.color="red"; //在IE<9是拋出錯(cuò)誤，在其他瀏覽器中都返回false delete window.age; //在IE<9是拋出錯(cuò)誤，在其他瀏覽器中都返回true delete window.color; //return true alert(window.age); //28 alert(window.color); //undefined
在使用var語(yǔ)句添加window屬性時(shí)，有一個(gè)名為[[Configurable]]的特性，這個(gè)特性的值被設(shè)置為false,因此這樣定義的屬性不可以通過(guò)delete刪除。
在嘗試訪(fǎng)問(wèn)未聲明的變量會(huì)拋出錯(cuò)誤，但通過(guò)查詢(xún)window對(duì)象，可以知道某個(gè)可能未聲明的變量是否存在。
//這里拋出錯(cuò)誤，因?yàn)閛ldValue未聲明 var newValue=oldValue; //這里不會(huì)拋出錯(cuò)誤，因?yàn)檫@是一次屬性查詢(xún) var newValue=window.oldValue // alert(newValue); //undefined
其實(shí)很多全局JavaScript對(duì)象如localtion和navigator實(shí)際上都是window對(duì)象的屬性。
2.窗口關(guān)系及框架
如果頁(yè)面中包含框架，則每個(gè)框架都有自己的window對(duì)象，并保存在frames集合中。
在frame集合中，可以通過(guò)數(shù)值索引或框架名來(lái)進(jìn)行訪(fǎng)問(wèn)。
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset rows="160,*">
<frame src="frame.htm" name="topFrame">
<frameset cols="50%,50%">
<frame src="anotherframe.htm" name="leftFrame">
<frame src="yetanotherframe.htm" name="rightFrame">
</frameset>
</frameset>
</html>
就這個(gè)例子而言，可以通過(guò)window.frames[0]或者window.frames["topFrame"]來(lái)引用上方框架。不過(guò)最好使用top.frames[0]來(lái)訪(fǎng)問(wèn)框架。
top對(duì)象始終指向最高(外)層框架，也就是瀏覽器窗口。使用它可以確保在一個(gè)框架中正確地訪(fǎng)問(wèn)另一個(gè)框架。
與top對(duì)象相對(duì)的還有另一個(gè)window對(duì)象是parent,parent（父）對(duì)象始終指向當(dāng)前框架的直接上層框架。
還有一個(gè)self對(duì)象，它始終指向window,實(shí)際上self與window可以互相使用，引入self對(duì)象的目的就只是為了與top和parent對(duì)象對(duì)應(yīng)起來(lái)。
所有的這些對(duì)象，都是window的屬性，可以使用window.parent或window.top使用它們。
3.窗口位置
多數(shù)瀏覽器都提供了screenLeft和screenTop,分別用于表示窗口相對(duì)與屏幕左邊和上邊的位置。FF則在screenX和screenY屬性中提供相同的窗口信息，Safari金額Chorme也同時(shí)支持這兩個(gè)屬性。
使用下面代碼可以跨瀏覽器取得窗口左邊和上邊的位置。
var leftPos=(typeof window.screenLeft=="number")?window.screenLeft:window.screenX; var 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,y軸的坐標(biāo)，moveBy()接收的是移動(dòng)的像素。
//將屏幕移動(dòng)到左上方 moveTo(0,0); //將窗口左移50px moveBy(-50,0);
但是，這兩個(gè)方法可能會(huì)被瀏覽器禁用。這兩個(gè)方法也只適用于最外層的window對(duì)象，不適用框架。
4.窗口大小
主流瀏覽器都為確定窗口大小提供了4個(gè)屬性：innerWidth、innerHight、outerWidth和outerHight。
在IE9+、Safari和FF中，outerWidth和outerHight返回的是瀏覽器窗口本身的尺寸(無(wú)論從哪個(gè)框架訪(fǎng)問(wèn)),但在Opera中，這兩個(gè)屬性的值表示頁(yè)面視圖容器的大小(單個(gè)標(biāo)簽頁(yè)窗口的大小)。而innerWidth、innerHight則表示該容器中頁(yè)面視圖的大?。p去邊框的寬度）。但在Chrome中，這4個(gè)屬性都表示視口大小而非瀏覽器大小。
IE9之前沒(méi)有提供取得瀏覽器窗口尺寸的屬性；不過(guò)它通過(guò)DOM提供了頁(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.clientHight取得相同信息。Chrome則不分標(biāo)準(zhǔn)模式還是混雜模式。
雖然最終無(wú)法確定瀏覽器窗口本身的大小，但卻可以取得頁(yè)面視口的大小。
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if (typeof pageWidth != "number"){
if (document.compatMode == "CSS1Compat"){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} 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獲取相同信息。
使用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è)表示新頁(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|窗口中文檔的像素高度
innerWidth|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|窗口題目欄是否可見(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)條，不可調(diào)整大小，無(wú)地址欄，無(wú)狀態(tài)欄。
6.間歇調(diào)用和超時(shí)調(diào)用
JavaScript是單線(xiàn)程語(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( 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è)置span的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 (num<max) {
setTimeout(incrementNumber,1000);
} else {
alert("OK");
}
}
setTimeout(incrementNumber,1000);
7.系統(tǒng)對(duì)話(huà)框
警告框alert()
alert("歡迎光臨!");
信息框confirm(),有取消，確定按鈕
if (confirm("你同意嗎？")) {
alert("同意");
} else {
alert("不同意");
}
提示框prompt(),用于提示用戶(hù)輸入一些文本
var result = prompt("您尊姓大名?"," ");
if (result !== null) {
alert(“歡迎光臨，”+result);
}
以上這篇Javascript之BOM(window對(duì)象)詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
ArrayList類(lèi)（增強(qiáng)版）...2007-04-04
Javascript學(xué)習(xí)筆記之?dāng)?shù)組的遍歷和 length 屬性
我們一般用循環(huán)來(lái)遍歷數(shù)組，而循環(huán)一直是 JavaScript 性能問(wèn)題的常見(jiàn)來(lái)源，有時(shí)循環(huán)用得不好會(huì)嚴(yán)重降低代碼的運(yùn)行速度。數(shù)組的屬性可以分為三種:length屬性,索引屬性,其他屬性.和普通對(duì)象相比,數(shù)組對(duì)象特殊的地方就是它的length屬性和索引屬性。2014-11-11
JavaScript基礎(chǔ)之Array?forEach使用示例
這篇文章主要為大家介紹了JavaScript基礎(chǔ)之Array?forEach使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
JavaScript italics方法入門(mén)實(shí)例（把字符串顯示為斜體）
這篇文章主要介紹了JavaScript italics方法入門(mén)實(shí)例,italics方法用于把字符串顯示為斜體,需要的朋友可以參考下2014-10-10
這篇文章主要為大家介紹了javascript策略模式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-01-01
2008-01-01
JavaScript事件列表解說(shuō)...2006-12-12
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)單元格拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
從零學(xué)JSON之JSON數(shù)據(jù)結(jié)構(gòu)
這篇文章主要介紹了JSON數(shù)據(jù)結(jié)構(gòu)的相關(guān)知識(shí),需要的朋友可以參考下2014-05-05
JavaScript的對(duì)象和包裝類(lèi)你了解多少
這篇文章主要為大家詳細(xì)介紹了JavaScript的對(duì)象和包裝類(lèi)，使用數(shù)據(jù)庫(kù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02