第一百一十一節，JavaScript，BOM瀏覽器對象模型

JavaScript，BOM瀏覽器對象模型

 

學習要點：

1.window對象

2.location對象

3.history對象

BOM也叫瀏覽器對象模型，它提供了不少對象，用於訪問瀏覽器的功能。BOM缺乏規範，每一個瀏覽器提供商又按照本身想法去擴展它，那麼瀏覽器共有對象就成了事實的標準。因此，BOM自己是沒有標準的或者尚未哪一個組織去標準它。

 

一．window對象，瀏覽器對象

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

1.window是最頂層的對象
2.window對象有六大屬性，這六大屬性自己也是對象
3.window對象旗下的document屬性，也是對象，而且document對象旗下有五大屬性，這五大屬性自己也是對象
4.總結。都是對象

 

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()瀏覽器彈出警告框，有參參數是彈出警告框要提示的信息

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

confirm()瀏覽器彈出警告框，有肯定和取消兩個按鈕，點擊當前返回布爾值真，點擊取消返回布爾值假，有參參數是警告框提示信息

//肯定和取消
if (confirm('你肯定要下載這個文件嗎？')) {                //confirm自己有返回值
    alert('您按了肯定！下載文件中');                    //按肯定返回true
} else {
    alert('您按了取消！放棄下載文件');                    //按取消返回false
}

prompt()輸入提示框，兩個參數，第一個是提示信息，第二個是輸入框默認參數，返回值是輸入的值

var num = prompt('請輸入一個數字', 0);        //兩個參數，一個提示，一個值
alert(num);                                //返回值能夠獲得

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

print()打印頁面

print()//打印頁面

find()頁面內容查找

find()//頁面查找

defaultStatus設置狀態欄默認文本

status狀態欄文本

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

 

3.新建窗口

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

open()新建窗口，能夠接受4個參數
參數1：要導航的url地址
參數2：給窗口命名一個名稱，凡是以這個名稱新建的頁面都在一個窗口打開
參數3：_parent當前窗口打開，_blank新建窗口打開
參數4：字符串參數，如寬度，高度，座標等

open('http://www.baidu.com');                //參數1：要導航的url地址
open('http://www.baidu.com','baidu');        //參數2：給窗口命名一個名稱，凡是以這個名稱新建的頁面都在一個窗口打開
open('http://www.baidu.com','_parent');        //參數3：_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(); //定義一個變量等於open()新建一個窗口
box.alert('');    //在新窗口打印一個警告框

 opener表示父窗口的意思，通常在子窗口使用

子窗口操做父窗口

//子窗口操做父窗口


//父窗口代碼
open('2.html','baidu','width=400,height=400,top=200,left=200,toolbar=yes'); //在這個父窗口打開一個子窗口

//子窗口代碼
document.onclick = function () {  //document事件.onclick點擊，在子窗口點擊執行這個匿名函數
    opener.document.write('子窗口讓我輸出的！'); //opener父窗口，document事件，write輸出，讓父窗口輸出字符串
};

 

3.窗口的位置和大小

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

screenLeft肯定頁面窗口與屏幕橫向邊距的距離，火狐不支持，返回窗口橫向邊距數字類型

/肯定窗口的位置,IE支持
alert(screenLeft);                            //IE支持
alert(typeof screenLeft);                        //IE顯示number，不支持的顯示undefined

screenTop肯定頁面窗口與屏幕縱向邊距的距離，火狐不支持，返回窗口縱向邊距數字類型

alert(screenTop);

screenX肯定頁面窗口與屏幕橫向邊距的距離，IE不支持，返回窗口橫向邊距數字類型

//肯定窗口的位置,Firefox支持
alert(screenX);                                //Firefox支持
alert(typeof screenX);                        //Firefox顯示number,不支持的同上

screenY肯定頁面窗口與屏幕縱向邊距的距離，IE不支持，返回窗口縱向邊距數字類型

alert(screenY);

PS：screenX屬性IE瀏覽器不認識，直接alert(screenX)，screenX會看成一個爲聲明的變量，致使不執行。那麼必須將它將至爲window屬性才能顯示爲初始化變量應有的值，因此應該寫成：alert(window.screenX)。

根據screenLeft火狐不支持，screenXIE不支持，因此要用一個跨瀏覽器的解決方法

//跨瀏覽器的方法
//橫向方案
var leftX = (typeof screenLeft == 'number') ? screenLeft : screenX; //三元運算符，返回真執行第一個，不然執行第二個
//縱向放在哪
var topY = (typeof screenTop == 'number') ? screenTop : screenY; //三元運算符，返回真執行第一個，不然執行第二個

 

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

innerWidth返回瀏覽器窗口自己的寬度

alert(innerWidth); //innerWidth返回瀏覽器窗口自己的寬度

innerHeight返回瀏覽器窗口自己的高度

 

alert(innerHeight); //innerHeight返回瀏覽器窗口自己的高度

 

outerWidth返回瀏覽器窗口自己加邊框的寬度

alert(outerWidth); //outerWidth返回瀏覽器窗口自己加邊框的寬度

outerHeight返回瀏覽器窗口自己加邊框的高度

 

alert(outerHeight); //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()IE有效，移動到0,0座標，兩個參數，第一個橫向座標數，第二個縱向座標數

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

moveBy()IE有效，向下和右分別移動10像素，兩個參數，第一個向下移動像素，第二個向右移動像素

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

 

調整瀏覽器大小

resizeTo()IE有效，調正大小，兩個參數寬度和高度

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

resizeBy()IE有效，擴展收縮大小，也就是每刷新一次就按照設置參數長大或者縮小，正數長大，負數縮小，兩個參數每次橫向像素和縱向像素

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

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

 

定時器

4.間歇調用和超時調用

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

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

setTimeout()定時器方法，兩個參數，第一個是要執行的代碼塊或者字符串形式的代碼塊，第二個是定時時間單位毫秒，返回值是超時調用的ID

//第一種方式不推薦
setTimeout("alert('Lee')", 1000);                //不建議直接使用字符串

//第二種方式
function box() {
    alert('Lee');
}
setTimeout(box, 1000);                        //直接傳入函數名便可

//第三種方式推薦
setTimeout(function () {                        //推薦作法
    alert('Lee');
}, 1000);

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

 

調用setTimeout()以後，該方法會返回一個數值ID，表示超時調用。這個超時調用的ID是計劃執行代碼的惟一標識符，能夠經過它來取消超時調用。

要取消還沒有執行的超時調用計劃，能夠調用clearTimeout()方法並將相應的超時調用ID做爲參數傳遞給它。

clearTimeout()方法取消超時調用，有參setTimeout()的返回值，超時調用的ID

var box = setTimeout(function () {                //把超時調用的ID複製給box
    alert('Lee');
}, 1000);

clearTimeout(box);                            //把ID傳入，取消超時調用
//被取消了最後不執行

setInterval()指定時間，間隔重複執行代碼，兩個參數，第一個要執行的代碼塊，第二個時間單位毫秒，返回值間歇調用id

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

setInterval(function () {                        //每1秒重複不停執行
    alert('Lee');
}, 1000);

clearInterval()方法，取消間歇調用，參數，間歇調用id

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

var box = setInterval(function () {                //獲取間歇調用的ID
    alert('Lee');
}, 1000);

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

但上面的代碼是沒有意義的，咱們須要一個能設置5秒的定時器，須要以下代碼：【不推薦】

//定時器
var num = 0; //起始時間
var max = 5; //結束時間
var id = null; //初始化空對象,全局變量

function box(){
    num++; //起始時間累加
    document.getElementById('a').innerHTML += num;  //每次累加向瀏覽器輸出
    if(num == max){   //判斷起始時間等於結束時間時
        clearInterval(id); //接收全局變量id，取消間歇調用定時器
        alert('5秒到了'); //打印時間到後的動做
    }
}
id = setInterval(box,1000); //將間歇調用定時器返回值賦值給全局變量

 

使用超時調用，模擬定時器【推薦】

通常認爲，使用超時調用來模擬間歇調用是一種最佳模式。在開發環境下，不多使用真正的間歇調用，由於須要根據狀況來取消ID，而且可能形成同步的一些問題，咱們建議不使用間歇調用，而去使用超時調用。

var num = 0;  //設置起始時間
var max = 5;  //設置結束時間
function box() {  //定義函數
    num++; //起始時間自身累加
    document.getElementById('a').innerHTML += num;  //每次累加向瀏覽器輸出
    if (num == max) { //判斷起始時間等於結束時
        alert('5秒後結束！'); //打印5秒
    } else {
        setTimeout(box, 1000); //起始時間不等於結束時間，執行函數，執行計時器，函數裏面執行自己遞歸
    }
}
setTimeout(box, 1000);                        //執行定時器

PS：在使用超時調用時，不必跟蹤超時調用ID，由於每次執行代碼以後，若是再也不設置另外一次超時調用，調用就會自行中止。

 

二．location對象，就是url對象

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

location獲取當前的URL

alert(window.location); //獲取當前的URL
alert(document.location); //獲取當前的URL
//上面二者相同

location對象的屬性

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

 

location對象的方法

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

 hash屬性設置錨點和獲取錨點

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


alert(location.hash);                        //獲取錨點，獲取#後的字符串

port屬性設置端口和獲取端口

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

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

hostname屬性設置主機名和獲取主機名

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

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

pathname屬性設置設置當前路徑和獲取當前路徑

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

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

protocal屬性設置當前協議和獲取當前協議

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

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

 search屬性設置和獲取?後的字符串

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

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

href屬性設置和獲取URL

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

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

 

自定義函數，獲取URL？後面的內容並處理數據

在Web開發中，咱們常常須要獲取諸如?id=5&search=ok這種類型的URL的鍵值對，那麼經過location，咱們能夠寫一個函數，來一一獲取。

function getArgs() {  //定義一個函數
    var args = [];     //建立一個數組
    //若是URL？後面的長度大於0，將URL？後的字符串截取從1位置開始，就去掉了？號
    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()方法，跳轉到指定的URL

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

reload()方法，最有效的從新加載，有可能從緩存加載

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

location.reload(true)方法，強制加載，從服務器源頭從新加載

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

replace方法，能夠避免產生跳轉前的歷史記錄，有參要調整的地址

 

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

 

 

三．history對象，歷史記錄對象，也就是瀏覽器的前進後退

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

 

history對象的屬性

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

 

history對象的方法

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

 length屬性，歷史記錄總數

alert(history.length);  // length屬性，歷史記錄總數

back()前往瀏覽器歷史條目前一個URL，相似後退

function back() {                            //跳轉到前一個URL
    history.back();    
}

forward()前往瀏覽器歷史條目下一個URL，相似前進

function forward() {                        //跳轉到下一個URL
    history.forward();
}

go()瀏覽器在history對象中向前或向後，正數向前如2就是向前兩條，反之負數向後兩條

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

PS：能夠經過判斷history.length == 0，獲得是否有歷史記錄。