如果你想使用window或document，你需要在<script is:inline></script>中编写脚本。这样Astro就不会触及你的JS并将其直接包含在HTML中。位于--- ---之间页面顶部的JS将在构建时执行。

您也可以使用const { pathname } = Astro.url从Astro组件访问当前路径名。

默认情况下，Astro会处理、优化和捆绑页面上的任何和标签，您可以使用is：inline指令退出此行为。

• 文件
  您可以在.astro组件中使用is:inline指令，如下所示：

---
// static build only
---

<script is:inline>
    console.log(document, window)
</script>

脚本标记

文档中提到的<script>标记足以使用文档和窗口，因为它是用于客户端Javascript的
https://docs.astro.build/en/guides/client-side-scripts/#using-script-in-astro

内联脚本

如果您不需要<script is:inline>，则不推荐使用它，因为它旨在避免捆绑脚本，而这是很少需要的。如果您使用包含该脚本的组件，假设有10个示例（例如，10张卡），则该脚本将被复制10次，因此会影响加载性能。
https://docs.astro.build/en/guides/client-side-scripts/#script-bundling

示例

此示例显示如何在pure Astro中创建多个客户端计数器，这与pure html类似。
更多详情请参见https://docs.astro.build/en/core-concepts/astro-components/

---
//Astro Front matter => Javascript
---
<!-- html -->

<!-- style -->

<!-- script -->
<script>
    console.log("int cards")
    const cards = document.querySelectorAll(".card")
    cards.forEach(card => {
        const plus = card.querySelector('button.plus')
        const minus = card.querySelector('button.minus')
        const value = card.querySelector(".value")
        plus.onclick  = ()=>{value.textContent = parseInt(value.textContent) + 1}
        minus.onclick = ()=>{value.textContent = parseInt(value.textContent) - 1}
    });
</script>

下面是repo项目完整示例的链接：
https://github.com/MicroWebStacks/astro-examples#04_client-counters
这里有一个指向该回购协议的直接StackBlitz项目的链接
https://stackblitz.com/github/MicroWebStacks/astro-examples/tree/main/04_client-counters