JavaScript BOM浏覽器對象模型

 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

新視窗的y坐标。不能是負值

left

新視窗的x坐标。不能是負值

yes或no

是否在浏覽器視窗中顯示位址欄。不同浏覽器預設值不同

menubar

是否在浏覽器視窗顯示菜單欄。預設為no

resizable

是否可以通過拖動浏覽器視窗的邊框改變大小。預設為no

scrollbars

如果内容在頁面中顯示不下，是否允許滾動。預設為no

是否在浏覽器視窗中顯示狀态欄。預設為no

toolbar

是否在浏覽器視窗中顯示工具欄。預設為no

fullscreen

浏覽器視窗是否最大化，僅限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;

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 () {//推薦做法

}, 1000);

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

調用settimeout()之後，該方法會傳回一個數值id，表示逾時調用。這個逾時調用的id是計劃執行代碼的唯一辨別符，可以通過它來取消逾時調用。

要取消尚未執行的逾時調用計劃，可以調用cleartimeout()方法并将相應的逾時調用id作為參數傳遞給它。

var box = settimeout(function () {//把逾時調用的id複制給box

cleartimeout(box);//把id傳入，取消逾時調用

間歇調用與逾時調用類似，隻不過它會按照指定的時間間隔重複執行代碼，直至間歇調用被取消或者頁面被解除安裝。設定間歇調用的方法是setinterval()，它接受的參數與settimeout()相同：要執行的代碼和每次執行之前需要等待的毫秒數。

setinterval(function () {//重複不停執行

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

var box = setinterval(function () {//擷取間歇調用的id

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;

num++;

if (num == max) {

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

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中的哪部分

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，得到是否有曆史記錄。

感謝收看本次教程！

本課程是由北風網(ibeifeng.com)

瓢城web俱樂部(yc60.com)聯合提供：

本次主講老師：李炎恢

我的部落格：hi.baidu.com/李炎恢/

我的郵件：[email protected]