BOM全稱(chēng)Browser Object Model(瀏覽器對(duì)象模型), 它提供了與瀏覽器窗口交互的對(duì)象和方法. 簡(jiǎn)單來(lái)說(shuō):
想象一下, DOM是你房間里的家具(可以移動(dòng)、修改), 而B(niǎo)OM是你房間的窗戶(hù)和門(mén)(可以打開(kāi)、關(guān)閉、調(diào)整大小).
BOM的核心是window
對(duì)象, 它是JavaScript在瀏覽器中的全局對(duì)象. 我們常用的alert()
、setTimeout()
其實(shí)都是window
的方法.
二、window對(duì)象
window
對(duì)象有兩個(gè)重要身份:
全局對(duì)象:在瀏覽器中, 所有全局變量和函數(shù)都是window
的屬性和方法.
瀏覽器窗口: 代表瀏覽器窗口或標(biāo)簽頁(yè).
var myVar = "Hello";
console.log(window.myVar);
console.log(myVar === window.myVar);
function sayHi() {
console.log("Hi!");
}
window.sayHi();
2.1 常用window屬性
讓我們看看window
對(duì)象有哪些實(shí)用的屬性:
1) window.innerWidth/window.innerHeight: 獲取瀏覽器窗口的內(nèi)部寬度和高度(不包括工具欄和滾動(dòng)條)
2) window.outerWidth/window.outerHeight: 獲取整個(gè)瀏覽器窗口的寬度和高度
3) window.location: 獲取當(dāng)前頁(yè)面的URL信息
4) window.navigator: 獲取瀏覽器信息, 例如: window.navigator.userAgent
5) window.screen: 獲取用戶(hù)屏幕信息, 例如: window.screen.width, window.screen.height
2.2 常用window方法
window
對(duì)象提供了許多實(shí)用的方法:
彈窗類(lèi):
alert():
警告框
confirm():
確認(rèn)框(返回true/false)
prompt():
輸入框(返回用戶(hù)輸入或null)
定時(shí)器:
setTimeout():
延遲執(zhí)行
setInterval():
循環(huán)執(zhí)行
clearTimeout()
/clearInterval():
清除定時(shí)器
窗口操作:
open():
打開(kāi)新窗口
close():
關(guān)閉窗口
moveTo()
/moveBy():
移動(dòng)窗口
resizeTo()
/resizeBy():
調(diào)整窗口大小
2.3 瀏覽器窗口操作示例
1) 打開(kāi)新窗口:
const newWindow = window.open(
"https://www.example.com",
"exampleWindow",
"width=600,height=400"
);
參數(shù)說(shuō)明:
窗口規(guī)格常用選項(xiàng):
2)關(guān)閉窗口:
window.close();
newWindow.close();
通常只能關(guān)閉由JavaScript打開(kāi)的窗口, 瀏覽器出于安全限制, 不允許腳本隨意關(guān)閉用戶(hù)打開(kāi)的窗口.
3) 調(diào)整窗口的大小和位置:
window.moveTo(100, 200);
window.moveBy(50, 30);
window.resizeTo(800, 600);
window.resizeBy(100, -50);
出于用戶(hù)體驗(yàn)和安全考慮, 這些方法通常只能用于由window.open()
創(chuàng)建的窗口, 或需要用戶(hù)先與頁(yè)面交互后才能使用.
if (newWindow.closed) {
console.log("新窗口已關(guān)閉");
}
window.focus();
window.blur();
1) window與全局作用域的關(guān)系:var globalVar = "我是全局變量";
console.log(globalVar);
console.log(window.globalVar);
function globalFunc() {
console.log("我是全局函數(shù)");
}
globalFunc();
window.globalFunc();
ES6的let
和const
聲明的變量不會(huì)成為window
的屬性: let localLet = "我是let變量";
const localConst = "我是const常量";
console.log(window.localLet);
console.log(window.localConst);
function enterFullscreen() {
const element = document.documentElement;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
window.addEventListener("resize", () => {
console.log(`窗口大小已改變:${window.innerWidth} x ${window.innerHeight}`);
if (window.innerWidth < 768) {
console.log("小屏幕布局");
} else {
console.log("大屏幕布局");
}
});
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
window.scrollTo({
top: 500,
behavior: "smooth"
});
function scrollToTop() {
window.scrollTo({ top: 0, behavior: "smooth" });
}
function scrollToBottom() {
window.scrollTo({
top: document.body.scrollHeight,
behavior: "smooth"
});
}
好了, 今天的文章就講到這里了, 記住, 雖然window
對(duì)象功能強(qiáng)大, 但現(xiàn)代Web開(kāi)發(fā)更強(qiáng)調(diào)用戶(hù)體驗(yàn), 很多傳統(tǒng)的窗口操作(如頻繁彈窗)已經(jīng)不推薦使用. 合理利用這些API, 可以創(chuàng)建既功能強(qiáng)大又用戶(hù)友好的Web應(yīng)用.
閱讀原文:原文鏈接
該文章在 2025/7/17 10:09:34 編輯過(guò)