本文原鏈接:https://cloud.tencent.com/developer/article/1018747
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 |
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開發中,我們經常需要獲取諸如?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中的哪部分 |
---|---|
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,得到是否有歷史記錄。