JavaScript基础教程（七十八）浏览器BOM之Window - 浏览器对象模型：掌控浏览器，深度解析JavaScript BOM中的Window对象

最新推荐文章于 2025-11-27 12:57:01 发布

原创最新推荐文章于 2025-11-27 12:57:01 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

JavaScript基础教程专栏收录该内容

91 篇文章

订阅专栏

Window对象：BOM的入口点

Window对象代表了浏览器窗口或标签页，是所有BOM对象的顶层对象。在浏览器环境中，全局变量和函数都会自动成为Window对象的属性。

// 在浏览器中，以下两句等效
console.log("Hello");
window.console.log("Hello");

// 全局变量实际是window的属性
var globalVar = "我在window对象上";
console.log(window.globalVar); // 输出"我在window对象上"

窗口操作与导航控制

Window对象提供了丰富的窗口控制方法，让我们能够操作浏览器窗口本身：

// 打开新窗口
const newWindow = window.open("https://example.com", "_blank", "width=600,height=400");

// 调整窗口大小
window.resizeTo(800, 600);

// 滚动窗口
window.scrollTo(0, 500); // 滚动到具体位置
window.scrollBy(0, 100); // 相对当前位置滚动

// 导航控制
window.location.href = "https://newurl.com"; // 跳转到新URL
console.log(window.location.protocol); // 获取当前协议

定时调度机制

JavaScript通过Window对象提供了强大的定时调度功能：

// 一次性定时器
const timeoutId = setTimeout(() => {
  console.log("这段代码将在1秒后执行");
}, 1000);

// 取消定时器
clearTimeout(timeoutId);

// 周期性定时器
let counter = 0;
const intervalId = setInterval(() => {
  console.log(`每秒执行一次，当前计数: ${counter}`);
  counter++;
  
  if (counter >= 5) {
    clearInterval(intervalId); // 5次后停止
  }
}, 1000);

对话框与用户交互

Window对象提供了多种与用户交互的方法：

// 警告框
window.alert("这是一个警告信息");

// 确认框
const isConfirmed = window.confirm("您确定要执行此操作吗？");
if (isConfirmed) {
  console.log("用户确认了操作");
} else {
  console.log("用户取消了操作");
}

// 输入框
const userName = window.prompt("请输入您的姓名", "默认姓名");
console.log(`用户输入: ${userName}`);

屏幕与设备信息

通过Window对象，我们可以获取用户设备和屏幕的详细信息：

// 获取屏幕信息
console.log(`屏幕宽度: ${window.screen.width}px`);
console.log(`屏幕高度: ${window.screen.height}px`);
console.log(`颜色深度: ${window.screen.colorDepth}位`);

// 获取浏览器视口尺寸
console.log(`视口宽度: ${window.innerWidth}px`);
console.log(`视口高度: ${window.innerHeight}px`);

// 检测设备在线状态
console.log(`设备是否在线: ${window.navigator.onLine}`);

Window对象作为BOM的核心，提供了浏览器环境的全局控制能力。从窗口操作到定时调度，从用户交互到设备信息获取，它几乎是所有浏览器JavaScript功能的基石。掌握Window对象的使用，是成为前端开发专家的关键一步。