本文介绍一种轻量、可靠且无需构建工具的方案，通过为 设置唯一 ID 并在 JS 中条件执行逻辑，实现单脚本跨页面安全复用，彻底避免“Cannot read properties of null”等因元素缺失引发的运行时错误。
本文介绍一种轻量、可靠且无需构建工具的方案，通过为 `
` 设置唯一 id 并在 js 中条件执行逻辑，实现单脚本跨页面安全复用，彻底避免“cannot read properties of null”等因元素缺失引发的运行时错误。在构建多页静态网站（如个人作品集）时，将 CSS 和 JavaScript 提取为全局资源是提升性能与可维护性的最佳实践。但直接共用一个 JS 文件常导致 Uncaught TypeError: Cannot read properties of null —— 根本原因在于：某页的初始化代码（如 document.querySelector('.hero-banner')）在其他不含该元素的页面中仍会执行，返回 null 后继续调用 .addEventListener() 等方法即抛出错误。
解决思路不是拆分脚本，而是让脚本具备页面感知能力。核心策略是：为每个 HTML 页面的 添加语义化 ID（如 id="home"、id="projects"），并在 JS 中通过 document.body.id 动态判断当前页面，仅执行对应逻辑。
✅ 正确做法：基于 body ID 的条件执行
首先，在每页 HTML 的
<!-- index.html --> <body id="home"> <header class="hero-banner">...</header> <script src="assets/js/main.js"></script> </body>
<!-- projects.html --> <body id="projects"> <main class="project-grid">...</main> <script src="assets/js/main.js"></script> </body>
然后，在统一的 main.js 中按页面组织逻辑：
立即学习“Java免费学习笔记（深入）”；
// assets/js/main.js
// ✅ 公共逻辑（所有页面都需要）放在这里
document.addEventListener('DOMContentLoaded', () => {
// 例如：全局导航高亮、GSAP 公共配置、基础滚动监听等
initGlobalNav();
setupGSAPDefaults();
});
// ✅ 页面专属逻辑：严格限定执行范围
if (document.body.id === 'home') {
// 仅在首页执行
const hero = document.querySelector('.hero-banner');
if (hero) { // 双重保险：ID 匹配 + 元素存在
gsap.from(hero, { opacity: 0, y: 30, duration: 1 });
}
const ctaBtn = document.getElementById('cta-download');
if (ctaBtn) {
ctaBtn.addEventListener('click', handleDownload);
}
}
if (document.body.id === 'projects') {
// 仅在项目页执行
const grid = document.querySelector('.project-grid');
if (grid) {
initProjectFilter(grid);
loadProjectPreviews();
}
}
// ✅ 工具函数建议封装（提升可读性与复用性）
function initGlobalNav() {
const navToggle = document.querySelector('[data-nav-toggle]');
if (navToggle) {
navToggle.addEventListener('click', () => {
document.body.classList.toggle('nav-open');
});
}
}
function setupGSAPDefaults() {
gsap.defaults({ ease: 'power2.out' });
}⚠️ 关键注意事项
- 必须唯一且稳定：避免使用动态生成或易变的值（如 URL 参数、时间戳），推荐使用语义化小写英文（home, about, contact）。
- 始终检查元素是否存在：即使做了页面 ID 判断，也建议对关键 DOM 查询加 if (element) 判断——这是防御性编程的黄金习惯。
- 脚本位置很重要：确保 <script> 标签置于 之前（或使用 defer 属性），保证 DOM 已加载完成，document.body.id 可靠可用。</script>
- 避免滥用 DOMContentLoaded 嵌套：公共逻辑可放在一个顶层 DOMContentLoaded 中；页面专属逻辑无需再包裹，因为 document.body.id 在脚本执行时已可读（前提是脚本在 body 底部）。
- CSS 同理可优化：为 添加 ID 后，也可在单个 CSS 文件中使用 body#home .hero-banner { ... } 实现页面级样式隔离，无需额外文件。
✅ 总结
这种基于 body.id 的条件执行模式，零依赖、零配置、兼容所有现代浏览器，完美契合静态站点开发场景。它既保持了资源合并带来的性能优势，又通过声明式页面标识实现了逻辑隔离，从根本上消除了跨页 DOM 访问错误。对于使用 GSAP、ScrollTrigger 或其他依赖特定 DOM 结构的库，此方案尤为实用——你只需专注编写各页面所需动画与交互，其余交给 if (document.body.id === 'xxx') 守门即可。
