什么是BOM?
(Browers Object Model)瀏覽器對象模型
BOM的結(jié)構(gòu):
window
|__ Document 文檔對象 （DOM）
|
|__ frames 框架集
|
|__ history 歷史信息對象
|
|__ navigator 瀏覽器信息對象
|
|__ locatin 地址欄信息對象
|
|__ screen 屏幕對象
window:
- 瀏覽器信息對象,也是前端最大的對象
Window 對象表示瀏覽器中打開的窗口。
如果文檔包含框架（frame 或 iframe 標(biāo)簽），瀏覽器會(huì)為 HTML 文檔創(chuàng)建一個(gè) window 對象，并為每個(gè)框架創(chuàng)建一個(gè)額外的 window 對象。
注釋：沒有應(yīng)用于 window 對象的公開標(biāo)準(zhǔn)，不過所有瀏覽器都支持該對象。
JS中許多方法都是window的屬性方法,如alert()它的全稱應(yīng)該是window.alert(),不錯(cuò),window的方法可以省略主語
下面我們看幾個(gè)較常用的window方法:
定時(shí)器:
開啟一個(gè)定時(shí)器:setInterval()
setInterval(要調(diào)用的函數(shù)或代碼,執(zhí)行周期(以毫秒記))
//創(chuàng)建一個(gè)定時(shí)器,其周期為1000毫秒執(zhí)行一次
setInerval(function(){
var i = 0;
console.log(i++);
},1000);
關(guān)閉一個(gè)定時(shí)器:clearInerval()
clearInerval(要關(guān)閉的定時(shí)器)
//若是要關(guān)閉定時(shí)器,則定時(shí)器需賦給一個(gè)變量才可
var time = setInerval(function(){
var i = 0;
console.log(i++);
},1000)
//將需關(guān)閉的定時(shí)器傳進(jìn)來
clearInerval(time);
注: 在遇到某些如可點(diǎn)擊的情況時(shí),連續(xù)點(diǎn)擊會(huì)重復(fù)開啟定時(shí)器,使定時(shí)紊亂,這時(shí)候我們只需在重復(fù)開啟時(shí)關(guān)閉上一個(gè)定時(shí)器即可
document.onclick = function(){
clearInerval(time);//點(diǎn)擊時(shí)會(huì)先關(guān)閉上一個(gè)定時(shí)器
var time = setInerval(function(){
var i = 0;
console.log(i++);
},1000)
};
延時(shí)器:
設(shè)置一個(gè)延時(shí)器:setTimeout()
setTimeout(調(diào)用的函數(shù)或執(zhí)行的代碼,執(zhí)行前等待的毫秒數(shù))
//設(shè)置一個(gè)延時(shí)器,讓代碼在一秒后執(zhí)行
setTimeout(function(){
console.log("我一秒后才出來");
},1000);
同樣有取消延時(shí):clearTimeout()
瀏覽器窗口:
打開一個(gè)新的瀏覽器窗口:open()
-
window.open(窗口地址,特征列表,新窗口的特征,布爾值)
注意: JS中有window.open()和Document.open()兩種方法,他們的作用完全不同,window.open()也可以寫成open(),但是為了表達(dá)清楚,建議寫全
window.open("https://www.baidu.com/","百度一下","width=300,height=300",false)
//除了最后一個(gè)參數(shù),其余都是字符串
//第一個(gè)參數(shù)是新窗口的地址
//第二個(gè)參數(shù)是由逗號分隔的特征列表,包括數(shù)字字母下劃線,它聲明了新窗口的名稱
//第三個(gè)參數(shù)聲明了新窗口要顯示的瀏覽器特征
//第四個(gè)參數(shù)規(guī)定他在瀏覽歷史的條目,如:
//true - URL 替換瀏覽歷史中的當(dāng)前條目。false - URL 在瀏覽歷史中創(chuàng)建新的條目。
具體可訪問:
HTML DOM open() 方法
瀏覽器窗口大小:
和window.open()方法相配套的有兩個(gè)方法:
把窗口的大小調(diào)整到指定的寬度和高度resizeTo()
resizeTo(width,height)
//在含有open或被打開的窗口設(shè)置resizeTo
resizeTo(300,300);
//新打開的窗口大小就為300px,300px
按照指定的像素調(diào)整窗口的大小resizeBy()
resizeBy(width,height)
//第一個(gè)參數(shù)是必須要有的,第二個(gè)參數(shù)是可選的他們的值正負(fù)皆可
setInerval(function(){
resizeBy(100,100);
},1000);
//每過一秒鐘,新窗口寬高分別增加100px
注意:在瀏覽器打開新窗口等操作需要擁有相應(yīng)權(quán)限,所以講resize這兩個(gè)方法寫在新窗口打開的頁面文檔中相對簡單容易
瀏覽器窗口移動(dòng):
把窗口的左上角移動(dòng)到一個(gè)指定的坐標(biāo)moveTo()
moveTo(新位置的x坐標(biāo),新位置的y坐標(biāo))
moveTo(300,300)
//將瀏覽器窗口左上角移動(dòng)到pingm300,300的位置
相對窗口的當(dāng)前坐標(biāo)把它移動(dòng)指定的像素
moveBy(向右移動(dòng)的距離,向下移動(dòng)的距離)
moveBy(300,300)
//將瀏覽器窗口向右且向下移動(dòng)300px
注意:瀏覽器窗口的移動(dòng)不會(huì)超出屏幕
窗口滾動(dòng):
將窗口內(nèi)容滾動(dòng)到指定坐標(biāo):scrollTo()
scrollTo(窗口文檔區(qū)左上角x坐標(biāo),窗口文檔區(qū)左上角y坐標(biāo))
document.onclick = function(){
scrollTo(0,3000)
}
//將body高度設(shè)置為6000,出現(xiàn)滾動(dòng)條,點(diǎn)擊窗口,滾動(dòng)條會(huì)差不多居中
將按照口指定像素滾動(dòng)
scrollBy(向右滾動(dòng)距離,向下滾動(dòng)距離)
document.onclick = function(){
scrollBy(0,100)
}
//同樣將body設(shè)置為6000,每點(diǎn)擊一次,滾動(dòng)條滾動(dòng)一小段距離
