Worker.js报错window is not defined：自动检测浏览器宽度求助

错误原因 #

Web Worker运行在独立的后台线程中，没有浏览器的DOM上下文，无法访问window、document这类与页面渲染相关的对象，所以直接在Worker里调用window.setInterval、window.screen.width、document.getElementById都会触发未定义错误。

解决方案 #

检测窗口宽度属于轻量操作，通常不需要Worker，但如果确实需要用Worker处理后续逻辑，正确的做法是在主线程监听窗口大小变化，把宽度数据传递给Worker，Worker只负责处理业务逻辑，不直接操作DOM或浏览器上下文。

方案1：主线程+Worker配合实现

1. 主线程代码（比如main.js）：

// 创建Worker实例
const worker = new Worker('worker.js');

// 监听窗口resize事件，发送宽度给Worker
window.addEventListener('resize', () => {
  const windowWidth = window.innerWidth; // 用innerWidth获取当前窗口宽度，比screen.width更准确
  worker.postMessage(windowWidth);
});

// 接收Worker返回的处理结果
worker.onmessage = (e) => {
  console.log(e.data);
};

// 初始化时发送一次当前窗口宽度
worker.postMessage(window.innerWidth);

2. Worker代码（worker.js）：

// 监听主线程发送的消息
self.onmessage = (e) => {
  const windowWidth = e.data;
  let resultMsg;
  
  if (windowWidth >= 1200) {
    resultMsg = `${windowWidth} Stay In desktop version`;
  } else {
    resultMsg = `${windowWidth} Switch to mobile version`;
  }
  
  // 将结果发回主线程
  self.postMessage(resultMsg);
};

方案2：直接在主线程处理（更简单）

如果只是检测窗口宽度并打印日志，完全不需要Worker，直接在主线程实现即可：

// 监听窗口大小变化
window.addEventListener('resize', handleWindowResize);

// 初始化执行一次
handleWindowResize();

function handleWindowResize() {
  const windowWidth = window.innerWidth;
  if (windowWidth >= 1200) {
    console.log(windowWidth, 'Stay In desktop version');
  } else {
    console.log(windowWidth, 'Switch to mobile version');
  }
}

关键提示 #

• Worker中可以直接使用setInterval（不需要加window.前缀），但不能访问任何DOM相关对象。
• 用window.innerWidth获取当前窗口的可视宽度，比window.screen.width（屏幕物理分辨率）更符合“检测浏览器宽度”的需求。

内容的提问来源于stack exchange，提问作者David