如何在前端浏览器中读取JavaScript文件以验证版本？

浏览器不会保留已加载外部脚本的原始文本内容，因此你需要通过重新请求main.js文件来读取其文本，进而匹配预设的版本特征片段：

• 定位脚本地址：通过DOM选择器找到页面中加载的main.js标签，提取其src属性。
• 请求脚本内容：使用fetch请求该地址，若要验证当前浏览器运行的版本，保留默认缓存策略即可；若要确认服务器最新版本是否生效，则添加缓存破击参数强制刷新。
• 匹配版本片段：在返回的文本中查找你用来识别版本的特征字符串，判断是否为目标版本。

代码示例 #

// 找到页面中的main.js脚本
const mainScript = document.querySelector('script[src*="main.js"]');
if (mainScript) {
  let scriptUrl = mainScript.src;

  // 若需强制获取服务器最新版本，取消下方注释：
  // const url = new URL(scriptUrl);
  // url.searchParams.append('cache-bust', Date.now());
  // scriptUrl = url.toString();

  fetch(scriptUrl)
    .then(res => {
      if (!res.ok) throw new Error('脚本请求失败');
      return res.text();
    })
    .then(scriptText => {
      // 替换为你的版本识别片段（比如构建时注入的版本标识）
      const targetVersion = 'APP_VERSION: "1.5.0"';
      if (scriptText.includes(targetVersion)) {
        console.log('当前加载的是正确版本');
      } else {
        console.log('当前加载的版本不匹配');
      }
    })
    .catch(err => console.error('读取脚本内容失败:', err));
}

注意事项 #

1. 跨域限制：确保main.js与当前页面同域，生产环境通常不会存在此问题。
2. 缓存控制：验证当前运行版本时不要加缓存破击参数，避免获取到服务器最新版本而非浏览器缓存的运行版本。
3. 精准匹配：建议在Angular构建时将版本号通过环境变量或脚本注入到main.js中，避免匹配到无关代码片段。

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