如何使用JS根据当前HTML文件名动态修改对应页面的title

你的条件分支匹配逻辑本身没有错误，但判断永远不会生效，核心问题有两个：

• 浏览器页面运行JS的全局环境里，根本没有名为file的内置对象。file.name是用户通过文件选择控件选中本地文件时，返回的File实例的属性，你直接在页面脚本里写file.name，控制台会直接抛出file is not defined的报错，所有if分支都不会被执行。
• 要获取当前加载的HTML页面的文件名，需要从浏览器提供的window.location地址信息中提取，不能凭空读取本地文件对象。

第一步：正确提取当前页面的文件名 #

从地址栏的路径中拆分出当前页面的文件名，不需要依赖任何文件对象：

// 拆分路径，取最后一段内容即为当前页面的文件名
const pathSegments = window.location.pathname.split('/');
const currentFileName = pathSegments[pathSegments.length - 1];

第二步：替换原有判断逻辑中的无效变量 #

把之前代码里的file.name全部替换成上面提取到的currentFileName即可：

if (currentFileName === 'index.html') {
    document.title = 'Home';
} else if (currentFileName === 'about.html') {
    document.title = 'About';
} else if (currentFileName === 'contact.html') {
    document.title = 'Contact';
}

• 不管是本地直接双击打开HTML文件测试（地址栏为file://开头的场景），还是部署到静态服务器上访问，上面的逻辑都可以正常运行。
• 如果后续你的站点做了URL美化（比如访问/about时加载about.html，地址栏不显示.html后缀），可以给逻辑补个兜底：当提取到的文件名为空、或者不在匹配列表里时，默认设置为首页标题，避免出现标题为空的情况。

注：从性能和规范角度，最推荐的方案其实是每个HTML文件直接在头部写好对应的<title>标签，完全不需要通过JS修改标题。但如果你需要把标题逻辑统一抽到公共JS里维护，上面的方案是可以完全满足需求的。

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