BOM屬性對象方法

本文原鏈接：https://cloud.tencent.com/developer/article/1018747

BOM

 1.window對象

2.location對象

3.history對象

BOM也叫瀏覽器對象模型，它提供了很多對象，用於訪問瀏覽器的功能。BOM缺少規范，每個瀏覽器提供商又按照自己想法去擴展它，那么瀏覽器共有對象就成了事實的標准。所以，BOM本身是沒有標准的或者還沒有哪個組織去標准它。

一．window對象

BOM的核心對象是window，它表示瀏覽器的一個實例。window對象處於JavaScript結構的最頂層，對於每個打開的窗口，系統都會自動為其定義 window 對象。

1.對象的屬性和方法

window對象有一系列的屬性，這些屬性本身也是對象。

window對象的屬性

屬性	含義
closed	當窗口關閉時為真
defaultStatus	窗口底部狀態欄顯示的默認狀態消息
document	窗口中當前顯示的文檔對象
frames	窗口中的框架對象數組
history	保存有窗口最近加載的URL
length	窗口中的框架數
location	當前窗口的URL
name	窗口名
offscreenBuffering	用於繪制新窗口內容並在完成后復制已存在的內容，控制屏幕更新
opener	打開當前窗口的窗口
parent	指向包含另一個窗口的窗口（由框架使用）
screen	顯示屏幕相關信息，如高度、寬度（以像素為單位）
self	指示當前窗口。
status	描述由用戶交互導致的狀態欄的臨時消息
top	包含特定窗口的最頂層窗口（由框架使用）
window	指示當前窗口，與self等效

 window對象的方法

方法	功能
alert(text)	創建一個警告對話框，顯示一條信息
blur()	將焦點從窗口移除
clearInterval(interval)	清除之前設置的定時器間隔
clearTimeOut(timer)	清除之前設置的超時
close()	關閉窗口
confirm()	創建一個需要用戶確認的對話框
focus()	將焦點移至窗口
open(url,name,[options])	打開一個新窗口並返回新window對象
prompt(text,defaultInput)	創建一個對話框要求用戶輸入信息
scroll(x,y)	在窗口中滾動到一個像素點的位置
setInterval(expression,milliseconds)	經過指定時間間隔計算一個表達式
setInterval(function,millisenconds,[arguments])	經過指定時間間隔后調用一個函數
setTimeout(expression,milliseconds)	在定時器超過后計算一個表達式
setTimeout(expression,milliseconds,[arguments])	在定時器超過時后計算一個函數
print()	調出打印對話框
find()	調出查找對話框

window下的屬性和方法，可以使用window.屬性、window.方法()或者直接屬性、方法()的方式調用。例如：window.alert()和alert()是一個意思。

2.系統對話框

瀏覽器通過alert()、confirm()和prompt()方法可以調用系統對話框向用戶顯示信息。系統對話框與瀏覽器中顯示的網頁沒有關系，也不包含HTML。

//彈出警告

alert('Lee');//直接彈出警告

//確定和取消

confirm('請確定或者取消');//這里按哪個都無效

if (confirm('請確定或者取消')) {//confirm本身有返回值

alert('您按了確定！');//按確定返回true

} else {

alert('您按了取消！');//按取消返回false

}

//輸入提示框

var num = prompt('請輸入一個數字', 0);//兩個參數，一個提示，一個值

alert(num);//返回值可以得到

//調出打印及查找對話框

print();//打印

find();//查找

defaultStatus = '狀態欄默認文本';//瀏覽器底部狀態欄初始默認值

status='狀態欄文本';//瀏覽器底部狀態欄設置值

3.新建窗口

使用window.open()方法可以導航到一個特定的URL，也可以打開一個新的瀏覽器窗口。它可以接受四個參數：1.要加載的URL；2.窗口的名稱或窗口目標；3.一個特性字符串；4.一個表示新頁面是否取代瀏覽器記錄中當前加載頁面的布爾值。

open('http://www.baidu.com');//新建頁面並打開百度

open('http://www.baidu.com','baidu');//新建頁面並命名窗口並打開百度

open('http://www.baidu.com','_parent');//在本頁窗口打開百度,_blank是新建

PS：不命名會每次打開新窗口，命名的第一次打開新窗口，之后在這個窗口中加載。窗口目標是提供頁面的打開的方式，比如本頁面，還是新建。

第三字符串參數

設置	值	說明
width	數值	新窗口的寬度。不能小於100
height	數值	新窗口的高度。不能小於100
top	數值	新窗口的Y坐標。不能是負值
left	數值	新窗口的X坐標。不能是負值
location	yes或no	是否在瀏覽器窗口中顯示地址欄。不同瀏覽器默認值不同
menubar	yes或no	是否在瀏覽器窗口顯示菜單欄。默認為no
resizable	yes或no	是否可以通過拖動瀏覽器窗口的邊框改變大小。默認為no
scrollbars	yes或no	如果內容在頁面中顯示不下，是否允許滾動。默認為no
status	yes或no	是否在瀏覽器窗口中顯示狀態欄。默認為no
toolbar	yes或no	是否在瀏覽器窗口中顯示工具欄。默認為no
fullscreen	yes或no	瀏覽器窗口是否最大化，僅限IE

//第三參數字符串

open('http://www.baidu.com','baidu','width=400,height=400,top=200,left=200,toolbar=yes');

//open本身返回window對象

var box = open();

box.alert('');//可以指定彈出的窗口執行alert();

//子窗口操作父窗口

document.onclick = function () {

opener.document.write('子窗口讓我輸出的！');

}

3.窗口的位置和大小

用來確定和修改window對象位置的屬性和方法有很多。IE、Safari、Opera和Chrome都提供了screenLeft和screenTop屬性，分別用於表示窗口相對於屏幕左邊和上邊的位置。Firefox則在screenX和screenY屬性中提供相同的窗口位置信息，Safari和Chrome也同時支持這兩個屬性。

//確定窗口的位置,IE支持

alert(screenLeft);//IE支持

alert(typeof screenLeft);//IE顯示number，不支持的顯示undefined

//確定窗口的位置,Firefox支持

alert(screenX);//Firefox支持

alert(typeof screenX);//Firefox顯示number,不支持的同上

PS：screenX屬性IE瀏覽器不認識，直接alert(screenX)，screenX會當作一個為聲明的變量，導致不執行。那么必須將它將至為window屬性才能顯示為初始化變量應有的值，所以應該寫成：alert(window.screenX)。

//跨瀏覽器的方法

var leftX = (typeof screenLeft == 'number') ? screenLeft : screenX;

var topY = (typeof screenTop == 'number') ? screenTop : screenY;

窗口頁面大小，Firefox、Safari、Opera和Chrome均為此提供了4個屬性：innerWidth和innerHeight，返回瀏覽器窗口本身的尺寸；outerWidth和outerHeight，返回瀏覽器窗口本身及邊框的尺寸。

alert(innerWidth);//頁面長度

alert(innerHeight);//頁面高度

alert(outerWidth);//頁面長度+邊框

alert(outerHeight);//頁面高度+邊框

PS：在Chrome中，innerWidth=outerWidth、innerHeight=outerHeight；

PS：IE沒有提供當前瀏覽器窗口尺寸的屬性；不過，在后面的DOM課程中有提供相關的方法。

在IE以及Firefox、Safari、Opera和Chrome中，document.documentElement.clientWidth和document.documentElement.clientHeight中保存了頁面窗口的信息。

PS：在IE6中，這些屬性必須在標准模式下才有效；如果是怪異模式，就必須通過document.body.clientWidth和document.body.clientHeight取得相同的信息。

//如果是Firefox瀏覽器，直接使用innerWidth和innerHeight

var width = window.innerWidth;//這里要加window，因為IE會無效

var height = window.innerHeight;

if (typeof width != 'number') {//如果是IE，就使用document

if (document.compatMode == 'CSS1Compat') {

width = document.documentElement.clientWidth;

height = document.documentElement.clientHeight;

} else {

width = document.body.clientWidth;//非標准模式使用body

height = document.body.clientHeight;

}

}

PS：以上方法可以通過不同瀏覽器取得各自的瀏覽器窗口頁面可視部分的大小。document.compatMode可以確定頁面是否處於標准模式，如果返回CSS1Compat即標准模式。

//調整瀏覽器位置

moveTo(0,0);//IE有效，移動到0,0坐標

moveBy(10,10);//IE有效，向下和右分別移動10像素

//調整瀏覽器大小

resizeTo(200,200);//IE有效，調正大小

resizeBy(200,200);//IE有效，擴展收縮大小

PS：由於此類方法被瀏覽器禁用較多，用處不大。

4.間歇調用和超時調用

JavaScript是單線程語言，但它允許通過設置超時值和間歇時間值來調度代碼在特定的時刻執行。前者在指定的時間過后執行代碼，而后者則是每隔指定的時間就執行一次代碼。

超時調用需要使用window對象的setTimeout()方法，它接受兩個參數：要執行的代碼和毫秒數的超時時間。

setTimeout("alert('Lee')", 1000);//不建議直接使用字符串

function box() {

alert('Lee');

}

setTimeout(box, 1000);//直接傳入函數名即可

setTimeout(function () {//推薦做法

alert('Lee');

}, 1000);

PS：直接使用函數傳入的方法，擴展性好，性能更佳。

調用setTimeout()之后，該方法會返回一個數值ID，表示超時調用。這個超時調用的ID是計划執行代碼的唯一標識符，可以通過它來取消超時調用。

要取消尚未執行的超時調用計划，可以調用clearTimeout()方法並將相應的超時調用ID作為參數傳遞給它。

var box = setTimeout(function () {//把超時調用的ID復制給box

alert('Lee');

}, 1000);

clearTimeout(box);//把ID傳入，取消超時調用

間歇調用與超時調用類似，只不過它會按照指定的時間間隔重復執行代碼，直至間歇調用被取消或者頁面被卸載。設置間歇調用的方法是setInterval()，它接受的參數與setTimeout()相同：要執行的代碼和每次執行之前需要等待的毫秒數。

setInterval(function () {//重復不停執行

alert('Lee');

}, 1000);

取消間歇調用方法和取消超時調用類似，使用clearInterval()方法。但取消間歇調用的重要性要遠遠高於取消超時調用，因為在不加干涉的情況下，間歇調用將會一直執行到頁面關閉。

var box = setInterval(function () {//獲取間歇調用的ID

alert('Lee');

}, 1000);

clearInterval(box);//取消間歇調用

但上面的代碼是沒有意義的，我們需要一個能設置5秒的定時器，需要如下代碼：

var num = 0;//設置起始秒

var max = 5;//設置最終秒

setInterval(function () {//間歇調用

num++;//遞增num

if (num == max) {//如果得到5秒

clearInterval(this);//取消間歇調用，this表示方法本身

alert('5秒后彈窗！');

}

}, 1000);//1秒

一般認為，使用超時調用來模擬間歇調用是一種最佳模式。在開發環境下，很少使用真正的間歇調用，因為需要根據情況來取消ID，並且可能造成同步的一些問題，我們建議不使用間歇調用，而去使用超時調用。

var num = 0;

var max = 5;

function box() {

num++;

if (num == max) {

alert('5秒后結束！');

} else {

setTimeout(box, 1000);

}

}

setTimeout(box, 1000);//執行定時器

PS：在使用超時調用時，沒必要跟蹤超時調用ID，因為每次執行代碼之后，如果不再設置另一次超時調用，調用就會自行停止。

二．location對象

location是BOM對象之一，它提供了與當前窗口中加載的文檔有關的信息，還提供了一些導航功能。事實上，location對象是window對象的屬性，也是document對象的屬性；所以window.location和document.location等效。

alert(location);//獲取當前的URL

location對象的屬性

屬性	描述的URL內容
hash	如果該部分存在，表示錨點部分
host	主機名：端口號
hostname	主機名
href	整個URL
pathname	路徑名
port	端口號
protocol	協議部分
search	查詢字符串

location對象的方法

方法	功能
assign()	跳轉到指定頁面，與href等效
reload()	重載當前URL
repalce()	用新的URL替換當前頁面

location.hash = '#1';//設置#后的字符串，並跳轉

alert(location.hash);//獲取#后的字符串

location.port = 8888;//設置端口號，並跳轉

alert(location.port);//獲取當前端口號，

location.hostname = 'Lee';//設置主機名，並跳轉

alert(location.hostname);//獲取當前主機名，

location.pathname = 'Lee';//設置當前路徑，並跳轉

alert(location.pathname);//獲取當前路徑，

location.protocal = 'ftp:';//設置協議，沒有跳轉

alert(location.protocol);//獲取當前協議

location.search = '?id=5';//設置?后的字符串，並跳轉

alert(location.search);//獲取?后的字符串

location.href = 'http://www.baidu.com';//設置跳轉的URL，並跳轉

alert(location.href);//獲取當前的URL

在Web開發中，我們經常需要獲取諸如?id=5&search=ok這種類型的URL的鍵值對，那么通過location，我們可以寫一個函數，來一一獲取。

function getArgs() {

//創建一個存放鍵值對的數組

var args = [];

//去除?號

var qs = location.search.length > 0 ? location.search.substring(1) : '';

//按&字符串拆分數組

var items = qs.split('&');

var item = null, name = null, value = null;

//遍歷

for (var i = 0; i < items.length; i++) {

item = items[i].split('=');

name = item[0];

value = item[1];

//把鍵值對存放到數組中去

args[name] = value;

}

return args;

}

var args = getArgs();

alert(args['id']);

alert(args['search']);

location.assign('http://www.baidu.com');//跳轉到指定的URL

location.reload();//最有效的重新加載，有可能從緩存加載

location.reload(true);//強制加載，從服務器源頭重新加載

location.replace('http://www.baidu.com');//可以避免產生跳轉前的歷史記錄

三．history對象

history對象是window對象的屬性，它保存着用戶上網的記錄，從窗口被打開的那一刻算起。

history對象的屬性

屬性	描述URL中的哪部分
length	history對象中的記錄數

history對象的方法

方法	功能
back()	前往瀏覽器歷史條目前一個URL，類似后退
forward()	前往瀏覽器歷史條目下一個URL，類似前進
go(num)	瀏覽器在history對象中向前或向后

function back() {//跳轉到前一個URL

history.back();

}

function forward() {//跳轉到下一個URL

history.forward();

}

function go(num) {//跳轉指定歷史記錄的URL

history.go(num);

}

PS：可以通過判斷history.length == 0，得到是否有歷史記錄。