- 說明：該文屬于 大前端全棧架構(gòu)白寶書專欄，目前階段免費，如需要項目實戰(zhàn)或者是體系化資源，文末名片加V！
- 作者：不渴望力量的哈士奇(哈哥)，十余年工作經(jīng)驗, 從事過全棧研發(fā)、產(chǎn)品經(jīng)理等工作，目前在公司擔任研發(fā)部門CTO。
- 榮譽：2022年度博客之星Top4、2023年度超級個體得主、谷歌與亞馬遜開發(fā)者大會特約speaker、全棧領(lǐng)域優(yōu)質(zhì)創(chuàng)作者。
- ?? 白寶書系列
- ?? 啟示錄 - 攻城獅的自我修養(yǎng)
- ?? Python全棧白寶書
- ?? ChatGPT實踐指南白寶書
- ?? 產(chǎn)品思維訓練白寶書
- ?? 全域運營實戰(zhàn)白寶書
- ?? 大前端全棧架構(gòu)白寶書
? BOM
BOM（Browser Object Model，瀏覽器對象模型）是JS與瀏覽器窗口交互的接口
一些與瀏覽器改變尺寸、滾動條滾動等相關(guān)的特效，都需要借助BOM技術(shù)
?? window對象
window對象是當前JS腳本運行所處的窗口，而這個窗口中包含DOM結(jié)構(gòu)，window.document屬性就是document對象
在有標簽頁功能的瀏覽器中，
每個標簽都擁有自己的window對象；也就是說，同一個窗口的標簽頁之間不會共享一個window對象
全局變量是winddow的屬性
示例代碼：
var a = 10;
console.log(window.a); //10
這就意味著，多個js文件之間是共享全局作用域的，即js文件沒有作用域隔離功能。全局變量是window屬性是js建立的一種的機制，多個js文件可以共同作用這些全局變量，使用起來更加的方便。
內(nèi)置函數(shù)普遍是window的方法
不僅僅是全局變量，內(nèi)置函數(shù)普遍是window的方法。比如alert()、setInterval()等內(nèi)置函數(shù)，普遍是window的方法
示例代碼：
console.log(window.alert == alert); //true
console.log(winddow.setInterval == setInterval); //true
console.log(window.hasOwnProperty('setInterval')); //true，hasOwnProperty返回是否具有指定名稱的屬性/方法
window.setInterval(function () { //可以用window打點調(diào)用內(nèi)置函數(shù)
console.log('你好')
}, 2000);
window中關(guān)于窗口尺寸相關(guān)屬性
| 屬性 | 意義 |
|---|---|
| windinnerHeight | 瀏覽器窗口的內(nèi)容區(qū)域的高度，包含水平滾動條（如果有的話） |
| innerWidth | 瀏覽器窗口的內(nèi)容區(qū)域的寬度，包含垂直滾動條（如果有的話） |
| outerHeight | 瀏覽器窗口的外部高度 |
| outerWidth | 瀏覽器窗口的外部寬度 |
獲得不包含滾動條的窗口寬度，要用documnet.documentElement.clientWidth
示例代碼：獲得窗口的內(nèi)寬、外寬、不包含滾動條的內(nèi)寬
console.log("瀏覽器內(nèi)寬(包含滾動條)：" + window.innerWidth);
console.log("瀏覽器外寬：" + window.outerWidth);
console.log("瀏覽器內(nèi)寬(不包含滾動條)：" + document.documentElement.clientWidth);
當瀏覽器窗口最大化時，瀏覽器內(nèi)寬和瀏覽器外寬值是一樣的（都不包含瀏覽器的邊框），當把瀏覽器窗口縮小，瀏覽器的外寬就會大一些，因為多了一個瀏覽器的邊框：
當窗口最大化時：
當窗口縮小時：
resize事件
在窗口大小改變之后，就會觸發(fā)resize事件，可以使用window.onresize或者window.addEventListener(‘resize’)來綁定事件處理函數(shù)
示例代碼：給窗口改變尺寸添加事件監(jiān)聽
//監(jiān)聽窗口尺寸改變
window.onresize = function () {
console.log("瀏覽器窗口的內(nèi)高：" + window.innerHeight);
console.log("瀏覽器窗口的外高：" + window.outerHeight);
};
已卷動高度
window.scrollY屬性表示在垂直方向已滾動的像素值document.documentElement.scrollTop屬性也表示窗口卷動高度
在實際工作中，考慮到瀏覽器之間的兼容性，在得到已滾動的像素值時，通常會這么寫：
var scrollTop = window.scrollY || document.documentElement.scrollTop; //當瀏覽器支持window.scrollY時，就取window.scrollY值，如果不支持，則取document.documentElement.scrollTop值
window.scrollY和document.documentElement.scrollTop區(qū)別：
window.scrollY是只讀的；document.documentElement.scrollTop不是只讀的，我們可以設(shè)置這個值來改變?yōu)g覽去的卷動高度
示例代碼：
var scrollTop = window.scrollY || document.documentElement.scrollTop;
console.log("窗口已卷動高度：" + scrollTop);
scroll事件
在窗口被卷動之后，就會觸發(fā)scroll事件，可以使用window.onscroll或者window.addEventListener(‘scroll’)來綁定事件處理函數(shù)
示例代碼：
//監(jiān)聽窗口卷動高度
window.onscroll = function () {
console.log("窗口卷動了：" + window.scrollY);
};
scroll事件監(jiān)聽在某些特定場景是非常常用的，比如實現(xiàn)H5頁面中的落地頁等
?? navigator對象
navigator：航行者、領(lǐng)航員、駕駛員
window.navigator屬性可以檢索navigator對象，它內(nèi)部含有
用戶此次活動的瀏覽器的相關(guān)屬性標識
| 屬性 | 意義 |
|---|---|
| appName | 瀏覽器官方名稱 |
| appVersion | 瀏覽器版本 |
| userAgent | 瀏覽器的用戶代理（含有內(nèi)核信息和封裝殼信息） |
| platform | 用戶操作系統(tǒng) |
示例代碼：
console.log("瀏覽器品牌：" + navigator.appName);
console.log("瀏覽器版本：" + navigator.appVersion);
console.log("瀏覽器用戶代理：" + navigator.userAgent);
console.log("瀏覽器用戶操作系統(tǒng)：" + navigator.platform);
?? history對象
history：歷史
window.history對象提供了
操作瀏覽器會話歷史的接口常用操作就是模擬瀏覽器回退按鈕，尤其在移動端常用
| 屬性 | 意義 |
|---|---|
| history.back() | 等同于點擊瀏覽器的回退按鈕 |
| history.go(-1) | 等同于history.back() |
示例代碼：比如從一個列表頁點擊進入詳情頁，詳情頁中有一個“返回列表頁”的按鈕，點擊可直接返回列表頁
<!--列表頁-->
<body>
<h1>列表頁</h1>
<div>
<ul>
<li><a href="BOM_history_詳情頁.html">點擊查看詳情</a></li>
</ul>
</div>
</body>
<!--詳情頁-->
<body>
<p>詳情頁</p>
<button id="back">返回列表頁</button>
<script>
var back = document.getElementById('back');
back.onclick = function () {
history.back(); //或者history.go(-1)
};
</script>
</body>
?? location對象
location：地址
window.location對象標識了當前所在網(wǎng)址，可以通過給這個屬性賦值命令瀏覽器進行頁面跳轉(zhuǎn)文章來源：http://www.zghlxwxcb.cn/news/detail-753416.html
| 屬性/方法 | 意義 |
|---|---|
| window.location | 賦值網(wǎng)址，可命令瀏覽器跳轉(zhuǎn)到對應(yīng)網(wǎng)址，window.location.href也可以實現(xiàn)這樣的效果 |
| window.reload(true) | 重新加載網(wǎng)頁 |
示例代碼：頁面上新增按鈕，分別可以實現(xiàn)跳轉(zhuǎn)到百度、刷新本頁面文章來源地址http://www.zghlxwxcb.cn/news/detail-753416.html
<body>
<div>
<a href="" script="javascript:window.location.reload(true)">刷新頁面</a>
<button id="btn">點我去百度</button>
</div>
<script>
var btn = document.getElementById('btn');
btn.onclick = function () {
// window.location = 'https://www.baidu.com';
window.location.href = 'https://www.baidu.com';
};
</script>
</body>
到了這里，關(guān)于〖大前端 - 基礎(chǔ)入門三大核心之JS篇?〗- BOM基礎(chǔ)之window對象的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
