Javascript之BOM(window對象)詳解
ECMAScript是JavaScript的核心，但在web使用JavaScript，那么BOM(瀏覽器對象模型)才是真正的核心。
BOM的核心對象是window，它表示瀏覽器的一個實例。
在瀏覽器中，window對象既是JavaScript訪問瀏覽器窗口的一個接口，又是ECMAScript規(guī)定的Global對象。也就是說，在網(wǎng)頁中定義的任何一個變量、對象和函數(shù)以window作為其Global對象。
1.全局作用域
既然window對象扮演著Global對象，那么所有在全局作用域中聲明的對象、變量和函數(shù)都會變成window的屬性和方法。
定義全局變量和在window對象上定義屬性還是有差別的：全局變量不能通過delete刪除，而在window對象上定義的屬性則可以。
var age=28; window.color="red"; //在IE<9是拋出錯誤，在其他瀏覽器中都返回false delete window.age; //在IE<9是拋出錯誤，在其他瀏覽器中都返回true delete window.color; //return true alert(window.age); //28 alert(window.color); //undefined
在使用var語句添加window屬性時，有一個名為[[Configurable]]的特性，這個特性的值被設(shè)置為false,因此這樣定義的屬性不可以通過delete刪除。
在嘗試訪問未聲明的變量會拋出錯誤，但通過查詢window對象，可以知道某個可能未聲明的變量是否存在。
//這里拋出錯誤，因為oldValue未聲明 var newValue=oldValue; //這里不會拋出錯誤，因為這是一次屬性查詢 var newValue=window.oldValue // alert(newValue); //undefined
其實很多全局JavaScript對象如localtion和navigator實際上都是window對象的屬性。
2.窗口關(guān)系及框架
如果頁面中包含框架，則每個框架都有自己的window對象，并保存在frames集合中。
在frame集合中，可以通過數(shù)值索引或框架名來進行訪問。
<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>
就這個例子而言，可以通過window.frames[0]或者window.frames["topFrame"]來引用上方框架。不過最好使用top.frames[0]來訪問框架。
top對象始終指向最高(外)層框架，也就是瀏覽器窗口。使用它可以確保在一個框架中正確地訪問另一個框架。
與top對象相對的還有另一個window對象是parent,parent（父）對象始終指向當(dāng)前框架的直接上層框架。
還有一個self對象，它始終指向window,實際上self與window可以互相使用，引入self對象的目的就只是為了與top和parent對象對應(yīng)起來。
所有的這些對象，都是window的屬性，可以使用window.parent或window.top使用它們。
3.窗口位置
多數(shù)瀏覽器都提供了screenLeft和screenTop,分別用于表示窗口相對與屏幕左邊和上邊的位置。FF則在screenX和screenY屬性中提供相同的窗口信息，Safari金額Chorme也同時支持這兩個屬性。
使用下面代碼可以跨瀏覽器取得窗口左邊和上邊的位置。
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對象表示的頁面可見區(qū)域的距離。在Chrome、FF和Safari中，screenY和screenTop中保存的是整個瀏覽器對于屏幕的坐標(biāo)值。
最終結(jié)果就是無法在跨瀏覽器條件下取得窗口左邊和上邊的精確坐標(biāo)值。
使用moveTo()和moveBy()方法倒是可以將窗口精確的移動到新位置，兩個方法都接收兩個參數(shù)，moveTo()接收的是x,y軸的坐標(biāo)，moveBy()接收的是移動的像素。
//將屏幕移動到左上方 moveTo(0,0); //將窗口左移50px moveBy(-50,0);
但是，這兩個方法可能會被瀏覽器禁用。這兩個方法也只適用于最外層的window對象，不適用框架。
4.窗口大小
主流瀏覽器都為確定窗口大小提供了4個屬性：innerWidth、innerHight、outerWidth和outerHight。
在IE9+、Safari和FF中，outerWidth和outerHight返回的是瀏覽器窗口本身的尺寸(無論從哪個框架訪問),但在Opera中，這兩個屬性的值表示頁面視圖容器的大小(單個標(biāo)簽頁窗口的大小)。而innerWidth、innerHight則表示該容器中頁面視圖的大小（減去邊框的寬度）。但在Chrome中，這4個屬性都表示視口大小而非瀏覽器大小。
IE9之前沒有提供取得瀏覽器窗口尺寸的屬性；不過它通過DOM提供了頁面可視區(qū)域的信息。
在IE、FF、Chrome、Opera和Safari中，document.documentElement.clientWidth和document.documentElement.clientHight中保存著頁面視口信息。在IE6下，要在標(biāo)準(zhǔn)模式下有效。如果是混雜模式就必須通過document.body.clientWidth和document.body.clientHight取得相同信息。Chrome則不分標(biāo)準(zhǔn)模式還是混雜模式。
雖然最終無法確定瀏覽器窗口本身的大小，但卻可以取得頁面視口的大小。
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);
對于移動設(shè)備，window.innerWidth和window.innerHight保存著可見視口，也就是屏幕上頁面區(qū)域的大小。移動IE瀏覽器則要通過document.documentElement.clientWidth和document.documentElement.clientHight獲取相同信息。
使用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)，一個特性字符串和一個表示新頁面是否取代當(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|窗口中文檔的像素高度
innerWidth|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|窗口題目欄是否可見
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象素，無工具條，無菜單條，無滾動條，不可調(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( 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è)置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); //十秒后時間不變了
}
}
intervalId = setInterval(incrementNumber,1000);
盡量用超時調(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)對話框
警告框alert()
alert("歡迎光臨!");
信息框confirm(),有取消，確定按鈕
if (confirm("你同意嗎？")) {
alert("同意");
} else {
alert("不同意");
}
提示框prompt(),用于提示用戶輸入一些文本
var result = prompt("您尊姓大名?"," ");
if (result !== null) {
alert(“歡迎光臨，”+result);
}
以上這篇Javascript之BOM(window對象)詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
30分鐘內(nèi)讓你明白正則表達式是什么，并對它有一些基本的了解，讓你可以在自己的程序或網(wǎng)頁里使用它。2013-02-02
這篇文章主要介紹了PHP開發(fā)者必須掌握的6個關(guān)鍵字,需要的朋友可以參考下2014-04-04
JavaScript基礎(chǔ)語法讓人疑惑的地方小結(jié)
JavaScript基礎(chǔ)語法讓人疑惑的地方小結(jié)，學(xué)習(xí)js的朋友可以了解下2012-05-05
腳本之家網(wǎng)站為了方便大家快速的查看效果，只要大家運行一下代碼即可能看到效果。2010-05-05
這篇文章對于剛開始學(xué)習(xí)js的朋友，非常有幫助，主要知識點都已經(jīng)整理好了。2010-06-06
js中g(shù)etBoundingClientRect( )方法案例詳解
這篇文章主要介紹了js中g(shù)etBoundingClientRect( )方法案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-07-07
JavaScript中|單豎杠通常被用來對浮點型數(shù)字進行取證,這里同時也介紹了單豎杠的運算規(guī)則,下面我們就來詳解JavaScript中|單豎杠的使用方法2016-05-05
網(wǎng)絡(luò)傳輸協(xié)議（http協(xié)議）
網(wǎng)絡(luò)傳輸協(xié)議（http協(xié)議）指服務(wù)器和客戶端間進行通信時的約束和規(guī)范，客戶端與服務(wù)端的數(shù)據(jù)交互并不是雜亂無章的，需要遵照（基于）一定的規(guī)范進行，本文主要介紹http超文本傳輸協(xié)議。希望對大家有所幫助2016-11-11
JavaScript If...Else 聲明...2007-04-04
在本篇文章里我們給大家分享的是關(guān)于JavaScript預(yù)編譯流程的相關(guān)知識點內(nèi)容，有需要的朋友們學(xué)習(xí)下。2019-01-01