本文详解为何将 javascript 放入 `

问题根源在于 执行时机与作用域不匹配。原始代码中存在两个关键错误：

1. onload="siteTitle()" 在 中调用未声明的全局函数
   当脚本通过

2. 脚本在 DOM 尚未就绪时执行（若未正确放置）
   原 HTML 将

✅ 正确做法是：移除内联 onload，完全依赖 window.onload 或更现代的 DOMContentLoaded，并确保脚本加载位置合理。

✅ 推荐解决方案（兼容性与可维护性兼顾）

HTML 结构（精简可靠）：

  
  
  
  
  


  
Site Title
  
    a
    
      
abc
      a
    
  

main.js 内容（简洁安全）：

// ✅ 方案一：使用 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 执行模型不匹配所致。遵循加载时机、作用域和防御性编程原则，即可彻底解决此类问题。