本文详解为何将 javascript 放入 `
问题根源在于 执行时机与作用域不匹配。原始代码中存在两个关键错误：
onload="siteTitle()" 在 中调用未声明的全局函数
当脚本通过脚本在 DOM 尚未就绪时执行（若未正确放置）
原 HTML 将
✅ 正确做法是：移除内联 onload，完全依赖 window.onload 或更现代的 DOMContentLoaded，并确保脚本加载位置合理。
✅ 推荐解决方案（兼容性与可维护性兼顾）
HTML 结构（精简可靠）：
Title Site Title
aabc
a
main.js 内容（简洁安全）：
立即学习“Java免费学习笔记（深入）”；
// ✅ 方案一：使用 window.onload（兼容旧浏览器）
window.onload = function() {
const element = document.getElementById("site-title");
if (element) {
element.innerHTML = "New Heading";
} else {
console.warn("Element #site-title not found.");
}
};
// ✅ 方案二（推荐）：使用 DOMContentLoaded（更早触发，无需等待图片等资源）
// document.addEventListener("DOMContentLoaded", function() {
// const element = document.getElementById("site-title");
// if (element) element.innerHTML = "New Heading";
// });⚠️ 注意事项与最佳实践
- 不要混用 onload 属性与 window.onload： 会覆盖 window.onload 的赋值，导致后者失效。
- 避免具名函数表达式用于全局调用：window.onload = function siteTitle() {...} 中的 siteTitle 不是全局函数，仅用于堆栈追踪；如需全局访问，请显式声明 function siteTitle() {...} 并单独赋值 window.onload = siteTitle;。
- 始终检查 DOM 元素是否存在：getElementById 返回 null 时直接操作会报错，加 if (element) 判断是健壮性基本要求。
- 现代替代方案：优先使用 document.addEventListener('DOMContentLoaded', ...)，它比 window.onload 触发更早（不等待 CSS/图片加载），且支持多次绑定，无覆盖风险。
综上，外部脚本失效并非“不能工作”，而是因 HTML 结构与 JS 执行模型不匹配所致。遵循加载时机、作用域和防御性编程原则，即可彻底解决此类问题。
