BOM 也叫瀏覽器對象模型,它提供了不少對象,用於訪問瀏覽器的功能。BOM 缺乏規範,每一個瀏覽器提供商又按照本身想法去擴展它,那麼瀏覽器共有對象就成了事實的標準。因此,BOM 自己是沒有標準的或者尚未哪一個組織去標準它。前端
一.window對象
BOM 的核心對象是window,它表示瀏覽器的一個實例。window 對象處於JavaScript 結構的最頂層,對於每一個打開的窗口,系統都會自動爲其定義window 對象。express
1.對象的屬性和方法
window 對象有一系列的屬性,這些屬性自己也是對象。數組
屬性含義瀏覽器
closed 當窗口關閉時爲真
defaultStatus 窗口底部狀態欄顯示的默認狀態消息
document 窗口中當前顯示的文檔對象
frames 窗口中的框架對象數組
history 保存有窗口最近加載的URL
length 窗口中的框架數
location 當前窗口的URL框架
name 窗口名
offscreenBuffering 用於繪製新窗口內容並在完成後複製已存在的內容,控制屏幕更新
opener 打開當前窗口的窗口
parent 指向包含另外一個窗口的窗口(由框架使用)
screen 顯示屏幕相關信息,如高度、寬度(以像素爲單位)
self 指示當前窗口。
status 描述由用戶交互致使的狀態欄的臨時消息
top 包含特定窗口的最頂層窗口(由框架使用)
window 指示當前窗口,與self 等效函數
window 對象的方法url
alert(text) 建立一個警告對話框,顯示一條信息
blur() 將焦點從窗口移除
clearInterval(interval) 清除以前設置的定時器間隔
clearTimeOut(timer) 清除以前設置的超時
close() 關閉窗口
confirm() 建立一個須要用戶確認的對話框
focus() 將焦點移至窗口
open(url,name,[options]) 打開一個新窗口並返回新window 對象
prompt(text,defaultInput) 建立一個對話框要求用戶輸入信息
scroll(x,y) 在窗口中滾動到一個像素點的位置spa
setInterval(expression,milliseconds) 通過指定時間間隔計算一個表達式
setInterval(function,millisenconds,[arguments]) 通過指定時間間隔後調用一個函數
setTimeout(expression,milliseconds) 在定時器超事後計算一個表達式
setTimeout(expression,milliseconds,[arguments]) 在定時器超過期後計算一個函數
print() 調出打印對話框
find() 調出查找對話框線程
window 下的屬性和方法,可使用window.屬性、window.方法()或者直接屬性、方法()的方式調用。例如:window.alert()和alert()是一個意思。code
2.系統對話框
瀏覽器經過alert()、confirm()和prompt()方法能夠調用系統對話框向用戶顯示信息。系統對話框與瀏覽器中顯示的網頁沒有關係,也不包含HTML。
//彈出警告 alert('1'); //直接彈出警告 //肯定和取消 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 是新建
//第三參數字符串 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,不支持的同上
//跨瀏覽器的方法 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); //頁面高度+邊框
//調整瀏覽器位置 moveTo(0,0); //IE 有效,移動到0,0 座標 moveBy(10,10); //IE 有效,向下和右分別移動10 像素 //調整瀏覽器大小 resizeTo(200,200); //IE 有效,調正大小 resizeBy(200,200); //IE 有效,擴展收縮大小
4.間歇調用和超時調用
JavaScript 是單線程語言,但它容許經過設置超時值和間歇時間值來調度代碼在特定的時刻執行。前者在指定的時間事後執行代碼,然後者則是每隔指定的時間就執行一次代碼。
超時調用須要使用window 對象的setTimeout()方法,它接受兩個參數:要執行的代碼和毫秒數的超時時間。
setTimeout("alert('1')", 1000); //不建議直接使用字符串 function box() { alert('2'); } setTimeout(box, 1000); //直接傳入函數名便可 setTimeout(function () { //推薦作法 alert('3'); }, 1000);
間歇調用與超時調用相似,只不過它會按照指定的時間間隔重複執行代碼,直至間歇調用被取消或者頁面被卸載。設置間歇調用的方法是setInterval(),它接受的參數與setTimeout()相同:要執行的代碼和每次執行以前須要等待的毫秒數。
var box = setInterval(function () { //獲取間歇調用的ID alert('1'); }, 1000); clearInterval(box); //取消間歇調用
二.location對象
location 是BOM 對象之一,它提供了與當前窗口中加載的文檔有關的信息,還提供了一些導航功能。事實上,location 對象是window 對象的屬性,也是document 對象的屬性;因此window.location 和document.location 等效。
location 對象的屬性
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 = 'hello'; //設置主機名,並跳轉 alert(location.hostname); //獲取當前主機名, location.pathname = 'hello'; //設置當前路徑,並跳轉 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
三.history對象
history 對象是window 對象的屬性,它保存着用戶上網的記錄,從窗口被打開的那一刻算起。
length history 對象中的記錄數
back() 前往瀏覽器歷史條目前一個URL,相似後退forward() 前往瀏覽器歷史條目下一個URL,相似前進go(num) 瀏覽器在history 對象中向前或向後