js中BOM學習

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開發中，咱們常常 的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，獲得是否有歷史記錄。