本文详解为何将 javascript 放入 `<script>` 标签内可正常运行，而通过 `src` 属性引入外部文件时却失效，并提供结构化修复方案，涵盖执行时机、<a style="color:#f60; text-decoration:underline;" title= "作用域" href="https://www.php.cn/zt/35787.html" target="_blank">作用域、<a style="color:#f60; text-decoration:underline;" title= "html" href="https://www.php.cn/zt/15763.html" target="_blank">html 解析顺序等核心要点。</script>
问题根源在于 执行时机与作用域不匹配。原始代码中存在两个关键错误：
onload="siteTitle()" 在 <body> 中调用未声明的全局函数
当脚本通过 <script src="main.js"> 加载时，window.onload = function siteTitle() { ... } 仅将匿名函数赋值给 window.onload，但并未将 siteTitle 函数本身挂载为全局变量（function siteTitle() {...} 是函数表达式中的具名函数，其名称仅在内部可用）。因此 <body onload="siteTitle()"> 会抛出 ReferenceError: siteTitle is not defined。脚本在 DOM 尚未就绪时执行（若未正确放置）
原 HTML 将 <script src="main.js"> 放在 </body> 之前，看似合理，但若浏览器解析稍有延迟或网络加载慢，仍可能触发 getElementById("site-title") 返回 null —— 特别当 main.js 被缓存或异步加载时风险更高。
✅ 正确做法是：移除内联 onload，完全依赖 window.onload 或更现代的 DOMContentLoaded，并确保脚本加载位置合理。
✅ 推荐解决方案（兼容性与可维护性兼顾）
HTML 结构（精简可靠）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<link rel="stylesheet" href="styles.css" />
<!-- 外部脚本置于 <head> 中，无需 defer/async —— 因我们依赖 onload 保证 DOM 就绪 -->
<script src="main.js"></script>
</head>
<body>
<h1 id="site-title" class="title">Site Title</h1>
<div class="box-container">
<div class="left-box">a</div>
<div class="right-box">
<h1 class="title-in">abc</h1>
a
</div>
</div>
</body>
</html>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：<body 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 执行模型不匹配所致。遵循加载时机、作用域和防御性编程原则，即可彻底解决此类问题。
