本文介绍一种轻量、可靠的方法，通过为 设置唯一 ID 并在 JS 中条件执行逻辑，实现单脚本适配多页面，避免因元素缺失导致的 Cannot read properties of null 报错，兼顾性能与可维护性。
本文介绍一种轻量、可靠的方法，通过为 `
` 设置唯一 id 并在 js 中条件执行逻辑，实现单脚本适配多页面，避免因元素缺失导致的 `cannot read properties of null` 报错，兼顾性能与可维护性。在构建多页静态网站（如个人作品集）时，将 CSS 和 JavaScript 提取为全局资源是提升加载性能和代码复用率的标准实践。但直接共用一个 JS 文件常引发运行时错误——例如 Uncaught TypeError: Cannot read properties of null，其根源在于：某页脚本试图操作另一页面才存在的 DOM 元素（如 document.querySelector('.hero-cta') 在无该元素的页面中返回 null，后续调用 .addEventListener() 即崩溃）。
解决思路不是拆分脚本，而是让脚本“感知”当前页面上下文，并按需执行对应逻辑。最简洁、兼容性最佳的方式是：为每个 HTML 页面的 标签赋予唯一 ID，并在 JS 中通过 document.body.id 进行条件分支控制。
✅ 正确做法示例：
<!-- page1.html --> <body id="home"> <header class="hero"><h1>Welcome</h1></header> <button class="js-scroll-top">↑ Top</button> </body>
<!-- page2.html -->
<body id="projects">
<section class="project-grid">
<div class="project-card" data-id="p1">Project A</div>
</section>
</body>对应单个 main.js 文件结构如下：
睿拓智能网站系统-网上商城
下载
睿拓智能网站系统-网上商城1.0免费版软件大小:5M运行环境：asp+access本版本是永州睿拓信息专为电子商务入门级用户开发的网上电子商城系统，拥有产品发布，新闻发布，在线下单等全部功能，并且正式商用用户可在线提供多个模板更换，可实现一般网店交易所有功能，是中小企业和个人开展个人独立电子商务商城最佳的选择，以下为详细功能介绍：1.最新产品-提供最新产品发布管理修改，和最新产品订单查看2.推荐产
立即学习“Java免费学习笔记（深入）”；
// ✅ 全局通用逻辑（所有页面都执行）
document.addEventListener('DOMContentLoaded', () => {
// 例如：统一初始化 GSAP、设置基础滚动监听、加载动画等
gsap.registerPlugin(ScrollTrigger);
console.log('Core scripts loaded.');
// ? 按页面 ID 分支执行专属逻辑
const currentPage = document.body.id;
if (currentPage === 'home') {
// 仅在首页执行
const hero = document.querySelector('.hero');
if (hero) {
gsap.from(hero, { opacity: 0, y: 30, duration: 1 });
}
const scrollTopBtn = document.querySelector('.js-scroll-top');
if (scrollTopBtn) {
scrollTopBtn.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
}
}
if (currentPage === 'projects') {
// 仅在项目页执行
const cards = document.querySelectorAll('.project-card');
cards.forEach(card => {
card.addEventListener('click', () => {
alert(`Viewing ${card.dataset.id}`);
});
});
}
// 可继续添加其他页面分支...
});⚠️ 关键注意事项：
- 务必检查元素是否存在：即使加了 if (currentPage === 'xxx')，也应在操作前用 if (element) 或 ?. 链式调用做防御性判断（如 hero?.querySelector('h1')），避免因模板微调导致意外报错；
- DOMContentLoaded 是安全前提：确保 DOM 已就绪再执行查询，避免因脚本过早执行而获取不到元素；
- ID 命名需规范且唯一：推荐使用语义化小写短横线格式（如 id="about"、id="contact"），避免空格或特殊字符；
- 不推荐依赖 window.location.pathname：虽可行，但对本地开发（file:// 协议）、路由重写（如 404.html 映射）或预渲染场景兼容性差； 方案更直观、可控、调试友好；
- CSS 同理可优化：为 添加 ID 后，也可在全局 CSS 中使用 body#home .hero { ... } 实现页面级样式隔离，无需重复引入样式表。
总结：通过
+ 条件分支 + 防御性 DOM 查询，你既能享受单文件带来的加载优势与维护便利，又能彻底规避跨页脚本干扰。这是一种零依赖、原生支持、易于团队协作的工程化实践，特别适合 Portfolio、Landing Page 等中小型静态站点。
