window对象核心API

window对象是浏览器环境中的全局对象，代表当前浏览器窗口或标签页。它提供了大量属性和方法，用于控制浏览器窗口、操作文档、处理事件以及与浏览器交互。理解window对象的核心API对于构建动态网页至关重要。

window对象的基本属性

window对象包含许多有用的属性，可以直接访问浏览器窗口的信息或全局变量。

// 获取窗口的宽度和高度
console.log(window.innerWidth);  // 视口宽度
console.log(window.innerHeight); // 视口高度

// 获取屏幕信息
console.log(window.screen.width);   // 屏幕宽度
console.log(window.screen.height);  // 屏幕高度

window对象还提供了导航相关的属性：

// 获取当前页面的URL
console.log(window.location.href);

// 获取浏览器信息
console.log(window.navigator.userAgent);

window对象的方法

window对象提供了许多实用的方法，用于控制浏览器窗口和执行各种操作。

弹窗方法

// 显示警告框
window.alert('这是一个警告');

// 显示确认对话框
const isConfirmed = window.confirm('你确定要删除吗？');
if (isConfirmed) {
    console.log('用户确认了操作');
}

// 显示输入对话框
const userName = window.prompt('请输入你的名字', '匿名');
console.log(`用户名: ${userName}`);

定时器方法

定时器是window对象最常用的功能之一：

// 设置一次性定时器
const timeoutId = window.setTimeout(() => {
    console.log('这段代码将在3秒后执行');
}, 3000);

// 清除定时器
window.clearTimeout(timeoutId);

// 设置间隔定时器
const intervalId = window.setInterval(() => {
    console.log('这段代码每2秒执行一次');
}, 2000);

// 清除间隔定时器
window.clearInterval(intervalId);

窗口操作

window对象允许开发者控制浏览器窗口的行为：

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

// 关闭窗口
newWindow.close();

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

// 移动窗口位置
window.moveTo(100, 100);

事件处理

window对象可以监听各种浏览器事件：

// 监听窗口大小变化
window.addEventListener('resize', () => {
    console.log(`窗口大小已改变: ${window.innerWidth}x${window.innerHeight}`);
});

// 监听滚动事件
window.addEventListener('scroll', () => {
    console.log(`当前滚动位置: ${window.scrollY}`);
});

// 监听页面加载完成事件
window.addEventListener('load', () => {
    console.log('页面和所有资源已加载完成');
});

存储API

window对象提供了客户端存储解决方案：

// 使用localStorage
window.localStorage.setItem('theme', 'dark');
const theme = window.localStorage.getItem('theme');
console.log(theme); // 输出: dark

// 使用sessionStorage
window.sessionStorage.setItem('token', 'abc123');
const token = window.sessionStorage.getItem('token');
console.log(token); // 输出: abc123

历史记录管理

window.history对象允许操作浏览器的历史记录：

// 前进一页
window.history.forward();

// 后退一页
window.history.back();

// 跳转到历史记录中的特定位置
window.history.go(-2); // 后退两页

// 添加新的历史记录
window.history.pushState({page: 1}, "title 1", "?page=1");

// 替换当前历史记录
window.history.replaceState({page: 2}, "title 2", "?page=2");

请求动画帧

window.requestAnimationFrame是动画开发的重要API：

function animate() {
    const element = document.getElementById('box');
    let position = 0;
    
    function step() {
        position += 1;
        element.style.left = position + 'px';
        
        if (position < 200) {
            window.requestAnimationFrame(step);
        }
    }
    
    window.requestAnimationFrame(step);
}

animate();

跨窗口通信

window对象支持不同窗口或iframe之间的通信：

// 父窗口发送消息
const iframe = document.getElementById('myFrame');
iframe.contentWindow.postMessage('Hello from parent', 'https://example.com');

// 子窗口接收消息
window.addEventListener('message', (event) => {
    if (event.origin !== 'https://parent.com') return;
    console.log('收到消息:', event.data);
});

性能测量

window.performance提供页面性能相关的数据：

// 测量代码执行时间
window.performance.mark('start');

// 执行一些操作
for (let i = 0; i < 1000000; i++) {
    Math.sqrt(i);
}

window.performance.mark('end');
window.performance.measure('My Operation', 'start', 'end');

const measures = window.performance.getEntriesByName('My Operation');
console.log(measures[0].duration); // 输出操作耗时(毫秒)

全局对象特性

作为全局对象，window有一些特殊行为：

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

// 函数声明也会成为window的方法
function globalFunc() {
    console.log('我是全局函数');
}
window.globalFunc(); // 输出: 我是全局函数

// 使用let/const声明的变量不会成为window属性
let localVar = '我是局部变量';
console.log(window.localVar); // 输出: undefined