JavaScript Window 对象详解
浏览器对象模型（BOM）核心知识点汇总 – 面向编程小白的详细指南
📌 Window对象是什么？
Window对象代表浏览器的整个窗口，它是浏览器对象模型（BOM）的顶层对象，所有其他对象（如document、location等）都是它的属性。
主要特点：
- 全局作用域：在浏览器中，所有全局变量和函数都是Window对象的属性和方法
- 跨窗口通讯：提供访问其他窗口的方法
- 浏览器操作：控制浏览器行为（如打开/关闭窗口、导航等）
- 客户端信息：提供有关浏览器和屏幕的信息
示例：访问Window对象的属性和方法
// 获取窗口宽度
let windowWidth = window.innerWidth;
// 弹出警告框
window.alert(“你好，世界！”);
// 实际上，因为window是全局对象，可以省略：
alert(“直接调用也可以！”);
let windowWidth = window.innerWidth;
// 弹出警告框
window.alert(“你好，世界！”);
// 实际上，因为window是全局对象，可以省略：
alert(“直接调用也可以！”);
🔍 Window对象常用属性
窗口尺寸属性
- innerWidth/innerHeight：浏览器窗口可视区域的宽高（不包括工具栏和滚动条）
- outerWidth/outerHeight：整个浏览器窗口的宽高（包括工具栏等）
- screenX/screenY：窗口相对于屏幕左上角的X和Y坐标
浏览器信息属性
- navigator：提供浏览器信息（名称、版本等）
- screen：提供用户屏幕的信息（分辨率、色彩深度等）
- location：提供当前窗口的URL信息
- history：提供浏览器历史记录访问功能
其他重要属性
- document：代表窗口中显示的HTML文档（DOM的入口点）
- frames：包含窗口中所有框架的数组
- localStorage/sessionStorage：浏览器存储对象
💡 Tip: 在JavaScript中，访问这些属性时通常可以省略”window.”前缀，因为它们属于全局作用域。
⚙️ Window对象常用方法
对话框方法
- alert(message)：显示带消息和确定按钮的警告框
- confirm(message)：显示带消息、确定和取消按钮的对话框，返回布尔值
- prompt(message, default)：显示带输入框的对话框，返回用户输入内容
窗口操作
- open(url, name, specs)：打开新浏览器窗口
- close()：关闭当前窗口
- moveTo(x, y)：移动窗口到指定屏幕位置
- resizeTo(width, height)：调整窗口尺寸
定时方法
- setTimeout(function, delay)：在指定毫秒后执行函数
- setInterval(function, interval)：每隔指定毫秒重复执行函数
- clearTimeout(timeoutID)：取消setTimeout
- clearInterval(intervalID)：取消setInterval
导航方法
- blur()：使窗口失去焦点
- focus()：使窗口获得焦点
- scrollTo(x, y)：滚动到文档中的特定位置
- print()：打开打印对话框打印当前文档
🎯 Window对象常用事件
加载事件
- load：当整个页面（包括所有资源）完成加载时触发
- DOMContentLoaded：当HTML文档完全加载解析完成时触发（无需等待样式表、图像等）
窗口事件
- resize：当浏览器窗口大小改变时触发
- scroll：当窗口滚动时触发
焦点事件
- focus：当窗口获得焦点时触发
- blur：当窗口失去焦点时触发
其他事件
- beforeunload：当窗口即将卸载（关闭或刷新）时触发
- hashchange：当URL的锚点部分（#后内容）改变时触发
// 事件监听示例
window.addEventListener(‘load’, function() {
console.log(‘页面已完全加载！’);
});
window.addEventListener(‘resize’, function() {
console.log(‘窗口大小已改变：’ + window.innerWidth);
});
window.addEventListener(‘scroll’, function() {
console.log(‘正在滚动…当前位置：’ + window.scrollY);
});
window.addEventListener(‘load’, function() {
console.log(‘页面已完全加载！’);
});
window.addEventListener(‘resize’, function() {
console.log(‘窗口大小已改变：’ + window.innerWidth);
});
window.addEventListener(‘scroll’, function() {
console.log(‘正在滚动…当前位置：’ + window.scrollY);
});
🔗 Window的子对象
1. Location对象
包含当前URL的信息，并提供导航方法：
- location.href：完整的URL
- location.protocol：协议（http:, https:）
- location.host：主机名和端口
- location.pathname：URL中的路径部分
- location.assign(url)：加载新文档
- location.reload()：重新加载当前文档
2. History对象
提供访问浏览器历史记录的方法：
- history.length：历史记录中的URL数量
- history.back()：后退到上一个页面
- history.forward()：前进到下一个页面
- history.go(n)：前进(n为正)或后退(n为负)n个页面
3. Navigator对象
提供浏览器和操作系统信息：
- navigator.userAgent：浏览器用户代理字符串
- navigator.platform：操作系统平台
- navigator.language：浏览器首选语言
- navigator.cookieEnabled：浏览器是否启用cookie
⚠️ 注意：navigator对象的某些属性（如userAgent）可以被用户修改，因此不应完全依赖它们做关键判断。
🚀 最佳实践与注意事项
使用建议
- 避免使用alert/confirm/prompt对话框，它们会阻塞浏览器主线程
- 使用setTimeout/setInterval时，记得在不需要时清除定时器
- 谨慎使用window.open()，现代浏览器可能会阻止弹出窗口
- 优先使用addEventListener而不是onEvent属性来绑定事件
性能优化
- 在resize和scroll事件中使用节流(throttle)或防抖(debounce)技术
- 将耗时的操作放入Web Workers中执行，避免阻塞主线程
- 使用requestAnimationFrame代替setTimeout做动画
安全注意事项
- 避免使用eval()函数，它存在安全风险
- 验证所有用户输入，防止XSS攻击
- 使用HTTPS确保通信安全
- 谨慎处理跨域消息，验证消息来源
// 防抖函数示例
function debounce(func, delay) {
let timer;
return function() {
clearTimeout(timer);
timer = setTimeout(func, delay);
};
}
// 使用防抖优化resize事件
window.addEventListener(‘resize’, debounce(function() {
console.log(‘调整大小完成’);
}, 250));
function debounce(func, delay) {
let timer;
return function() {
clearTimeout(timer);
timer = setTimeout(func, delay);
};
}
// 使用防抖优化resize事件
window.addEventListener(‘resize’, debounce(function() {
console.log(‘调整大小完成’);
}, 250));
Window对象功能演示
窗口信息
对话框
定时器和交互
计时器状态：未启动