.NET Core MVC中外联JavaScript文件失效问题求助

嘿，我来帮你搞定这个内嵌正常、外联就挂的问题！咱们一步一步来排查：

1. 最常见的坑：路径解析错误 #

你用的~/lib/bootstrap/dist/js/CarParts2018.js里的~是服务器端路径占位符（比如ASP.NET这类框架会解析它），但浏览器根本不认这个符号！它会把~当成路径的一部分，导致找不到JS文件。

解决办法：

• 用根相对路径：如果你的项目根目录下有lib文件夹，直接写 /lib/bootstrap/dist/js/CarParts2018.js（开头的/表示从网站根目录开始找）。
• 用文件相对路径：如果你的HTML页面在根目录，那直接写lib/bootstrap/dist/js/CarParts2018.js就行；如果HTML在子文件夹，比如pages/index.html，那路径要写成../lib/bootstrap/dist/js/CarParts2018.js（../表示上一级目录）。

你可以打开浏览器的开发者工具（F12），切换到Network标签，刷新页面看看这个JS文件的请求状态：如果是404，那绝对是路径的锅！

2. 外部JS文件内容是否正确 #

把内嵌代码复制到外部文件时，记得删掉<script>标签！正确的CarParts2018.js内容应该是这样的：

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

要是你不小心把<script>标签也粘进去了，JS会直接报错，功能自然失效。

3. DOM加载顺序问题（隐藏的大坑） #

如果你的<script>标签放在<head>里，那JS代码会在HTML结构加载完成前执行——这时候document.getElementById("defaultOpen")根本找不到元素，直接抛出错误，后面的代码也跑不起来。

解决办法有两种：

方法一：把script标签移到页面底部 #

把<script src="正确路径/CarParts2018.js"></script>放在</body>标签的前面，确保DOM先加载完成，再执行JS：

<body>
  <!-- 你的HTML结构 -->
  <script src="/lib/bootstrap/dist/js/CarParts2018.js"></script>
</body>

方法二：用DOM加载事件包裹代码 #

如果必须把script放在head里，就把JS代码包裹在DOMContentLoaded事件里，同时要把openCity函数挂载到全局（因为HTML里的onclick需要调用全局函数）：

document.addEventListener('DOMContentLoaded', function() {
  // 定义openCity函数
  function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
  }

  // 触发默认点击
  document.getElementById("defaultOpen").click();

  // 把函数暴露到全局，让HTML的onclick能调用
  window.openCity = openCity;
});

4. 浏览器缓存搞鬼 #

有时候浏览器会缓存旧的JS文件，你修改了内容但页面还是用的旧版本。这时候按Ctrl+F5强制刷新页面，或者给JS路径加个版本参数：

<script src="/lib/bootstrap/dist/js/CarParts2018.js?v=1.0"></script>

每次修改文件就改一下v的值，浏览器就会重新加载最新的文件了。

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