window对象核心API

window对象是浏览器环境中的全局对象，代表当前浏览器窗口或标签页。它提供了大量属性和方法，用于控制浏览器行为、操作DOM、管理定时器、处理事件等。理解window的核心API对前端开发至关重要。

window对象的属性和方法

全局属性和方法

window对象作为全局作用域的顶层对象，所有全局变量和函数都自动成为window的属性和方法：

var globalVar = '全局变量';
function globalFunc() {
  console.log('全局函数');
}

console.log(window.globalVar); // "全局变量"
window.globalFunc(); // "全局函数"

窗口控制

window提供了控制浏览器窗口的方法：

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

// 关闭当前窗口
window.close(); // 只能关闭由脚本打开的窗口

// 调整窗口大小
window.resizeTo(800, 600);
window.resizeBy(100, 50); // 相对调整

对话框API

基本对话框

window提供了三种基本对话框：

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

// 确认框
const isConfirmed = window.confirm('确定要删除吗？');
if (isConfirmed) {
  console.log('用户点击了确定');
}

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

定时器API

setTimeout和setInterval

window提供了两种定时器方法：

// 一次性定时器
const timeoutId = window.setTimeout(() => {
  console.log('3秒后执行');
}, 3000);

// 周期性定时器
const intervalId = window.setInterval(() => {
  console.log('每隔1秒执行一次');
}, 1000);

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

requestAnimationFrame

用于动画的高性能定时器：

function animate() {
  const element = document.getElementById('box');
  let pos = 0;
  
  function frame() {
    if (pos === 100) {
      cancelAnimationFrame(requestId);
    } else {
      pos++;
      element.style.left = pos + 'px';
      requestId = requestAnimationFrame(frame);
    }
  }
  
  const requestId = requestAnimationFrame(frame);
}

animate();

导航和位置API

location对象

window.location提供了访问和操作当前URL的方法：

// 获取当前URL信息
console.log(location.href);     // 完整URL
console.log(location.protocol); // 协议 (http: 或 https:)
console.log(location.host);     // 主机名和端口
console.log(location.pathname); // 路径部分
console.log(location.search);   // 查询字符串
console.log(location.hash);     // 锚点部分

// 导航到新页面
location.assign('https://example.com/newpage');
location.replace('https://example.com'); // 不保留历史记录
location.reload(); // 重新加载页面

history对象

window.history允许操作浏览器会话历史：

// 前进和后退
history.back();     // 等同于点击后退按钮
history.forward();  // 等同于点击前进按钮
history.go(-2);     // 后退两页

// 添加历史记录
history.pushState({page: 1}, 'title 1', '?page=1');
history.replaceState({page: 2}, 'title 2', '?page=2');

// 监听popstate事件
window.addEventListener('popstate', (event) => {
  console.log('位置变化:', event.state);
});

屏幕信息API

screen对象

window.screen提供用户屏幕的信息：

console.log('屏幕宽度:', screen.width);
console.log('屏幕高度:', screen.height);
console.log('可用宽度:', screen.availWidth);
console.log('可用高度:', screen.availHeight);
console.log('色彩深度:', screen.colorDepth);
console.log('像素密度:', screen.pixelDepth);

存储API

localStorage和sessionStorage

window提供了两种Web存储机制：

// localStorage - 持久化存储
localStorage.setItem('username', 'john_doe');
const user = localStorage.getItem('username');
localStorage.removeItem('username');
localStorage.clear();

// sessionStorage - 会话级存储
sessionStorage.setItem('token', 'abc123xyz');
const token = sessionStorage.getItem('token');

通信API

postMessage

跨窗口通信方法：

<!-- 父窗口 -->
<iframe id="childFrame" src="child.html"></iframe>
<script>
  const frame = document.getElementById('childFrame');
  frame.contentWindow.postMessage('Hello from parent', '*');

  window.addEventListener('message', (event) => {
    if (event.origin !== 'https://trusted-domain.com') return;
    console.log('收到消息:', event.data);
  });
</script>

<!-- 子窗口 (child.html) -->
<script>
  window.addEventListener('message', (event) => {
    console.log('收到父窗口消息:', event.data);
    event.source.postMessage('Hello back!', event.origin);
  });
</script>

性能API

performance对象

window.performance提供性能测量功能：

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

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

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

const measures = performance.getEntriesByName('My Operation');
console.log('耗时:', measures[0].duration + '毫秒');

设备API

navigator对象

window.navigator提供浏览器和设备信息：

console.log('用户代理:', navigator.userAgent);
console.log('平台:', navigator.platform);
console.log('语言:', navigator.language);
console.log('在线状态:', navigator.onLine);

// 地理位置
navigator.geolocation.getCurrentPosition(
  (position) => {
    console.log('纬度:', position.coords.latitude);
    console.log('经度:', position.coords.longitude);
  },
  (error) => {
    console.error('获取位置失败:', error.message);
  }
);

// 电池状态
navigator.getBattery().then((battery) => {
  console.log('电量:', battery.level * 100 + '%');
  console.log('充电状态:', battery.charging ? '充电中' : '未充电');
});

事件处理

窗口事件

window对象可以监听多种事件：

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

// DOM内容加载事件
window.addEventListener('DOMContentLoaded', () => {
  console.log('DOM解析完成');
});

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

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

// 离线/在线事件
window.addEventListener('offline', () => {
  console.log('网络已断开');
});

window.addEventListener('online', () => {
  console.log('网络已连接');
});

窗口操作

窗口位置和大小

// 获取视口大小
const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
const viewportHeight = window.innerHeight || document.documentElement.clientHeight;

// 获取滚动位置
const scrollX = window.scrollX || window.pageXOffset;
const scrollY = window.scrollY || window.pageYOffset;

// 滚动到指定位置
window.scrollTo(0, 500);
window.scrollTo({
  top: 500,
  left: 0,
  behavior: 'smooth'
});

// 滚动到元素
const element = document.getElementById('target');
element.scrollIntoView({behavior: 'smooth'});

高级特性

Web Workers

window支持创建Web Workers实现多线程：

// 主线程
const worker = new Worker('worker.js');

worker.postMessage('开始计算');

worker.onmessage = (event) => {
  console.log('收到结果:', event.data);
};

worker.onerror = (error) => {
  console.error('Worker错误:', error);
};

// worker.js
self.onmessage = (event) => {
  if (event.data === '开始计算') {
    // 执行耗时计算
    const result = heavyComputation();
    self.postMessage(result);
  }
};

function heavyComputation() {
  // 模拟耗时操作
  let sum = 0;
  for (let i = 0; i < 1000000000; i++) {
    sum += Math.sqrt(i);
  }
  return sum;
}

剪贴板API

window.navigator.clipboard提供剪贴板访问：

// 读取剪贴板文本
async function readClipboard() {
  try {
    const text = await navigator.clipboard.readText();
    console.log('剪贴板内容:', text);
  } catch (err) {
    console.error('读取剪贴板失败:', err);
  }
}

// 写入剪贴板文本
async function writeClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('内容已复制到剪贴板');
  } catch (err) {
    console.error('写入剪贴板失败:', err);
  }
}