JS中如何获取当前文件名？仅含域名或路径为/时Sources显示index

嘿，这个问题其实戳中了前端和服务器端的一个小边界点，我来给你掰扯明白：

首先得明确一个核心点：前端JavaScript原生API没办法直接拿到服务器默认的索引文件名。为啥呢？因为当你访问https://google.com/这种根路径时，浏览器只知道自己请求了路径/，而服务器返回的index.html（或者其他默认文件，比如index.php）是服务器端的配置逻辑，这个信息不会主动传递给浏览器的前端JS环境。

那你说调试器Sources面板里能看到index，是因为浏览器知道自己实际加载了哪个文件，但这个加载细节并没有暴露给前端的公开API，所以JS拿不到这个值。

不过我们有几个替代方案可以解决这个需求，看你的场景选：

• 固定默认文件名的场景：如果你的项目里服务器默认的索引文件是固定的（比如全都是index.html），那可以直接做个判断：

  function getCurrentFileName() {
    const path = window.location.pathname;
    // 如果是根路径，返回预设的默认文件名
    if (path === '/') {
      return 'index.html';
    }
    // 否则提取路径最后一段作为文件名
    return path.split('/').pop();
  }
  

  这个方法简单直接，适合大部分静态站点或者配置统一的项目。

• 动态获取当前加载脚本的文件名：如果你想获取的是当前执行的JS文件的名字（不是HTML），可以用document.currentScript：

  // 注意：这个要放在脚本文件里直接执行，不能放在回调里
  const currentScriptName = document.currentScript.src.split('/').pop();
  

  但这个方法只针对JS文件，没法拿到HTML的默认文件名。

• 服务器端注入信息：如果你的默认文件名不固定，或者想准确拿到实际加载的文件，最靠谱的方式是让后端帮忙。比如后端在返回页面的时候，把当前文件名注入到全局变量里：

  <script>
    // 后端模板引擎渲染这个值，比如PHP里的<?php echo basename(__FILE__); ?>
    window.currentPageFileName = 'index.html';
  </script>
  

  这样前端JS直接访问window.currentPageFileName就能拿到准确的文件名了。

总结一下：前端原生没法直接获取服务器的默认索引文件名，得根据你的项目情况选上面的替代方案~

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