Astro 默认将组件内脚本作用域化，导致页面跳转后事件监听丢失；通过 is:global 指令或统一管理全局脚本可彻底解决导航栏折叠/展开逻辑失效问题。
astro 默认将组件内脚本作用域化，导致页面跳转后事件监听丢失；通过 `is:global` 指令或统一管理全局脚本可彻底解决导航栏折叠/展开逻辑失效问题。
在 Astro 构建的静态站点中，导航栏（尤其是移动端响应式菜单）常出现“首次加载正常，但跳转到 /generals、/pricing 等子页面后点击菜单图标无反应”的问题。根本原因在于：Astro 默认对 .astro 文件中的 <script> 标签执行客户端作用域隔离（client-side scoping）</script>——即脚本仅在组件首次挂载时执行，且其事件监听器不会随 Astro 的部分导航（Partial Hydration 或 View Transitions）自动重绑定。
你当前的
<script>
document.addEventListener("DOMContentLoaded", function () {
let icon = document.querySelector("ion-icon")!;
icon.addEventListener("click", function () {
// ... 切换逻辑
});
});
</script>
该脚本在用户从首页跳转至 /generals 时不会重新执行（因为 Astro 复用 DOM 并跳过重复 hydration），而 document.querySelector("ion-icon") 可能已失效或未绑定新监听器，导致点击无响应。
✅ 正确解法：使用 is:global 指令
将脚本声明为全局可执行，确保每次页面切换（包括 Astro 的视图过渡）后仍能正确初始化：
<script is:global>
// ✅ 全局生效：在每次导航后都会重新运行
document.addEventListener("DOMContentLoaded", () => {
const icon = document.querySelector("ion-icon");
if (!icon) return;
icon.addEventListener("click", () => {
const menuList = document.querySelector("nav ul");
if (!menuList) return;
if (icon.getAttribute("name") === "menu") {
icon.setAttribute("name", "close");
menuList.classList.add("top-[80px]", "opacity-100", "z-10");
} else {
icon.setAttribute("name", "menu");
menuList.classList.remove("top-[80px]", "opacity-100");
}
});
});
</script>
⚠️ 注意事项：
- is:global 会绕过 Astro 的默认作用域保护，需确保脚本不污染全局命名空间（避免重复绑定、内存泄漏）；
- 建议添加 if (!icon) return 和 if (!menuList) return 防御性检查，提升健壮性；
- 若项目复杂度上升，推荐将此类交互逻辑抽离为独立的 navbar.js，并在 Layout.astro 的 中通过 <script src="/js/navbar.js" type="module"></script> 引入，实现集中管理与复用；
- 同时确认 ion-icon 脚本已正确加载（你已在 Layout 中引入，但需注意 CDN 链接中的邮箱混淆代码
? 进阶优化（可选）：
利用 Astro 的 onMount（需启用 client:load）或结合 ViewTransitions API 监听 transitionstart 事件，在过渡前/后手动重置状态，进一步增强体验一致性。
通过 is:global 一行指令即可快速修复导航栏行为异常，兼顾开发效率与运行稳定性——这是 Astro 生态中处理跨页面交互逻辑的经典实践。
