ReferenceError：窗口未在 JavaScript 中定义

作者

ReferenceError: 窗口未在 JavaScript 中定义

ReferenceError: window is not defined in JavaScript

出现“ReferenceError: window is not defined”错误的原因有多种：

  1. window在 Node.js 中使用。
  2. 在服务器上使用window（例如 Next.js 中的服务器端渲染）。
  3. 全局变量拼写错误window（应该全部小写）。

未定义参考错误窗口

window对象表示包含 DOM 文档的窗口，并且仅在浏览器中可用。

Node.js 不提供浏览器环境，它是服务器端运行时，所以我们不能使用 Node.js 中的window变量。

如果浏览器中出现“ReferenceError: window is not defined”，请尝试将 JS 脚本标签移至标签底部body。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <!-- Your HTML here -->

    <!-- 👇️ Script at bottom of body -->
    <script type="module" src="index.js"></script>
  </body>
</html>

您可能有一些在创建 DOM 之前运行的附加组件。

window全局变量表示运行脚本的窗口（浏览器端）。

如果你使用 React.js 或 Next.js 并且你需要检查你是在浏览器上（可以使用window）还是在服务器上（不能使用window），请检查
window变量是否为 not undefined。

索引.js
if (typeof window !== 'undefined') {
  console.log('You are on the browser');

  // ✅ Can use window here
  console.log(window.innerWidth);

  window.addEventListener('mousemove', () => {
    console.log('Mouse moved');
  });
} else {
  console.log('You are on the server');
  // ⛔️ Don't use window here
}
我们检查全局window变量是否没有. 如果定义了变量，我们就在浏览器上并且可以访问它。 undefinedwindow

要解决“ReferenceError: window is not defined”错误，请确保仅window在浏览器上使用全局变量。

该变量表示包含 DOM 文档的窗口，不能在服务器端使用（例如在 Node.js 中）。

如果您需要在 中定义全局变量Node.js，请使用global, not window。

索引.js
// 👇️ in Node.js
global.test = 'EXAMPLE';

现在我们可以在其他文件中使用该变量：

另一个文件.js
import './index.js';

console.log(global.test); // 👉️ "EXAMPLE"

index.js但是，简单地从文件中导出一个变量并根据需要导入它要好得多。

索引.js
export const test = 'example';

现在我们可以将变量导入另一个文件。

索引.js
import {test} from './index.js';

console.log(test); // 👉️ "example"

与定义全局变量相比，这是一种更好、更明确的方法。

如果您在 React.js 中遇到错误，请移动挂钩中使用的window代码
useEffect。

该useEffect钩子在 React 在浏览器环境中渲染您的组件后运行，因此您可以安全地window访问useEffect.
应用程序.js
import {useEffect} from 'react';

const App = () => {
  useEffect(() => {
    // ✅ Use window in useEffect hook
    const handleScroll = event => {
      console.log('window.scrollY', window.scrollY);
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div
      style={{
        border: '3px solid black',
        width: '400px',
        height: '1000rem',
      }}
    >
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
  );
};

export default App;

如果这不起作用，则必须使用if语句来检查您是在浏览器（可以使用window）还是服务器（不能使用window）上。

索引.js
if (typeof window !== 'undefined') {
  console.log('You are on the browser');

  // ✅ Can use window here
  console.log(window.innerWidth);

  window.addEventListener('mousemove', () => {
    console.log('Mouse moved');
  });
} else {
  console.log('You are on the server');
  // ⛔️ Don't use window here
}

要解决“ReferenceError: window is not defined”错误，请确保仅window在浏览器中使用该对象。

该window对象在服务器上不可用，例如在 Node.js 中或在使用 Next.js 进行服务器端渲染时。

–