相同JS脚本在不同HTML页面不生效 mainStrings.js加载异常排查

故障现象 #

• 项目根目录下的start.html脚本引入逻辑正常，页面运行无报错，引入代码如下：

<script src='https://code.s3.yandex.net/web-code/smoothly.js'></script>
<script src="./core/mainStrings.js"></script>
<script src="./chapters/lore/lorescript.js"></script>

• 同项目的makeCharacter.html采用近似逻辑引入脚本时，执行页面专属脚本characterScript.js抛出参数未定义错误，无法读取公共脚本mainStrings.js中存储的配置参数，初步判断为mainStrings.js未在该页面成功加载。该页面引入代码如下：

<script src='https://code.s3.yandex.net/web-code/smoothly.js'></script>
<script src="./core/mainStrings.js"></script>
<script src="./chapters/makeCharacter/characterScript.js"></script>

mainStrings.js为项目公共数据脚本，统一存储各页面输入控件、按钮的核心配置，供所有页面的业务脚本复用调用。

核心故障原因 #

最高概率触发原因为相对路径解析错误：
相对路径./的解析基准是当前HTML文件的存放目录，不是项目根目录：

• 根目录下的start.html引用./core/mainStrings.js时，实际解析路径为项目根目录/core/mainStrings.js，路径匹配所以加载成功。
• 如果makeCharacter.html没有放在项目根目录，而是和characterScript.js一同存放在chapters/makeCharacter/目录下，./core/mainStrings.js会被解析为chapters/makeCharacter/core/mainStrings.js，该路径下不存在对应文件，直接导致公共脚本加载404，后续脚本自然读不到公共变量。

排查与修复方案 #

1. 先验证路径问题：打开浏览器开发者工具的「网络」面板，刷新makeCharacter.html页面，查看mainStrings.js的请求状态码，如果是404即可确认路径错误。
   修复方式：将makeCharacter.html中mainStrings.js的引用路径改为../../core/mainStrings.js——两层../代表从当前二级目录向上返回两级回到项目根目录，即可正确匹配公共脚本路径。
2. 若路径验证正常无404，再排查两类常见问题：
   • 作用域问题：检查mainStrings.js内的公共变量是否被封装在函数作用域内、未挂载到全局window对象上，不同页面DOM结构差异可能导致作用域访问异常，在mainStrings.js末尾显式将公共变量挂载到window即可解决。
   • 加载时序问题：检查script标签是否误加了async/defer异步加载属性，导致characterScript.js先于mainStrings.js执行，去掉异步属性、保持脚本按书写顺序同步加载即可。

内容的提问来源于stack exchange，提问作者Prains