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