如何在astro JS中使用document和window元素？

在Astro JS中直接使用 document 或 window 元素需要一些特别的处理，因为Astro 默认在服务器端渲染(SSR)页面，而这些对象 (document 和 window) 是在浏览器环境中定义的，服务器端是不存在这些对象的。这意味着如果你直接在组件的顶部或者在服务器执行的代码中使用这些对象，会导致错误。

为了在Astro中正确使用 document 和 window，你需要确保这些代码只在客户端上执行。这里有几种方法来实现：

1. 使用客户端仅组件

Astro 允许你指定某些组件只在客户端上运行。你可以使用 client:only 指令来告诉 Astro，某个特定的组件应该只在客户端渲染。这样，任何在这个组件中使用的 document 或 window 对象都是安全的，因为它们不会在服务器端尝试访问这些对象。

例如，如果你有一个需要使用 window 对象的组件，你可以这样做：

jsx
---
// Example.astro
---
<div client:only="my-component">
  <MyComponent />
</div>

2. 动态导入

在Astro中，你可以动态导入一个模块，这样它只会在客户端加载和执行。使用动态导入时，可以在导入的模块里安全地访问 document 和 window。

javascript
---
// SomeComponent.astro
import { useEffect } from 'react';

let LoadedComponent;

if (typeof window !== 'undefined') {
    LoadedComponent = (await import('../components/ClientOnlyComponent')).default;
}
---

{LoadedComponent ? <LoadedComponent /> : <p>Loading...</p>}

3. 使用内联脚本

有时，你可能需要在 Astro 页面上直接运行一段脚本。你可以使用 <script> 标签，并确保它只在客户端执行。

html
---
// InlineScript.astro
---
<script>
  if (typeof window !== 'undefined') {
    // 安全使用 window 或 document
    window.addEventListener('resize', () => {
      console.log('窗口大小改变了！');
    });
  }
</script>

示例

假设你需要在页面加载时调整一些元素的大小，你可以在Astro中这样实现：

astro
---
// ResizeComponent.astro
import { onMount } from 'solid-js';

function resizeHandler() {
  const element = document.getElementById('some-element');
  if (element) {
    element.style.height = `${window.innerHeight}px`;
  }
}
---

<div client:only="resize">
  <script>
    onMount(() => {
      window.addEventListener('resize', resizeHandler);
      resizeHandler(); // 初始调用一次
    });
  </script>
  <div id="some-element">调整我!</div>
</div>

以上所示，使用 client:only 指令是确保组件只在客户端渲染，从而安全地访问浏览器对象。这些方法可以帮助你在 Astro 项目中有效地利用 document 和 window，同时避免在服务器端渲染时出现错误。