Javascript的BOM 1

BOM 也叫瀏覽器對象模型，它提供了不少對象，用於訪問瀏覽器的功能。BOM 缺乏規範，每一個瀏覽器提供商又按照本身想法去擴展它，那麼瀏覽器共有對象就成了事實的標準。因此，BOM 自己是沒有標準的或者尚未哪一個組織去標準它。
一．window對象
BOM 的核心對象是window，它表示瀏覽器的一個實例。window 對象處於JavaScript 結
構的最頂層，對於每一個打開的窗口，系統都會自動爲其定義window 對象。

 

1.對象的屬性和方法
window 對象有一系列的屬性，這些屬性自己也是對象。

 

 

 

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：不命名會每次打開新窗口，命名的第一次打開新窗口，以後在這個窗口中加載。
窗口目標是提供頁面的打開的方式，好比本頁面，仍是新建。

 

 

//第三參數字符串
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.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 對象的屬性，它保存着用戶上網的記錄，從窗口被打開的那一刻
算起。

 

function back() { //跳轉到前一個URL
history.back();
}
function forward() { //跳轉到下一個URL
history.forward();
}
function go(num) { //跳轉指定歷史記錄的URL
history.go(num);
}

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