当前位置：首页 > JavaScript

js实现窗口

2026-03-01 12:05:11JavaScript

窗口大小调整与获取

通过 window.innerWidth 和 window.innerHeight 可以获取浏览器窗口的视口宽度和高度（包含滚动条）。window.outerWidth 和 window.outerHeight 则返回浏览器窗口的外部尺寸（包括工具栏、地址栏等）。

const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
console.log(`视口尺寸: ${viewportWidth} x ${viewportHeight}`);

窗口滚动控制

使用 window.scrollTo() 方法滚动到指定位置。参数可以是具体坐标或滚动选项对象。

// 滚动到绝对位置
window.scrollTo(0, 500);

// 平滑滚动到顶部
window.scrollTo({
  top: 0,
  behavior: 'smooth'
});

新窗口打开与关闭

window.open() 创建新窗口，可指定URL、窗口名称和特性参数。window.close() 关闭当前窗口（通常仅对脚本打开的窗口有效）。

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

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

窗口事件监听

监听窗口大小变化和滚动事件：

// 窗口大小变化事件
window.addEventListener('resize', () => {
  console.log(`新尺寸: ${window.innerWidth} x ${window.innerHeight}`);
});

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

全屏模式控制

通过 Element.requestFullscreen() 实现全屏显示，document.exitFullscreen() 退出全屏。

// 进入全屏
document.documentElement.requestFullscreen();

// 退出全屏
document.exitFullscreen();

窗口焦点控制

使用 window.focus() 和 window.blur() 控制窗口焦点。

// 获取焦点
window.focus();

// 失去焦点
window.blur();

跨窗口通信

通过 postMessage 实现跨窗口通信，配合 message 事件监听实现数据传递。

// 发送消息
otherWindow.postMessage('Hello', 'https://target-origin.com');

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

js实现窗口