本文介绍一种轻量、可靠且无需构建工具的方案，通过为 设置唯一 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 的
睿拓智能网站系统-网上商城1.0免费版软件大小:5M运行环境：asp+access本版本是永州睿拓信息专为电子商务入门级用户开发的网上电子商城系统，拥有产品发布，新闻发布，在线下单等全部功能，并且正式商用用户可在线提供多个模板更换，可实现一般网店交易所有功能，是中小企业和个人开展个人独立电子商务商城最佳的选择，以下为详细功能介绍：1.最新产品-提供最新产品发布管理修改，和最新产品订单查看2.推荐产
<!-- 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') 守门即可。
