如何获取与Index.html同目录下其他文件的lastModified属性？网页图表更新时间显示问题求助

我正在制作一个支持用户查看图表的网页，需要在图表旁加个标签显示它的更新日期。现在的问题是，我只能拿到当前文档的lastModified属性，尝试获取同目录下chart.png的这个属性时，代码返回了undefined。我的代码是这样的：

var file = 'chart.png'
document.write(file.lastModified)
/* document.getElementById("date").innerHTML = document.lastModified; */

解决方案 #

浏览器端JS出于安全限制，没办法直接读取服务器上其他文件的属性——你之前的代码把字符串'chart.png'当成了文件对象来访问lastModified，自然会返回undefined。这里有几个实用的解决办法：

1. 通过HEAD请求获取响应头的Last-Modified #

你可以给目标文件发送一个HEAD请求（只获取响应头，不下载文件内容），从返回的Last-Modified字段里拿到更新时间。代码示例：

// 假设你有一个id为date的元素用来显示时间
fetch('chart.png', { method: 'HEAD' })
  .then(res => {
    const modifyTime = res.headers.get('Last-Modified');
    // 把时间转成易读的本地格式
    document.getElementById('date').textContent = new Date(modifyTime).toLocaleString();
  })
  .catch(err => {
    console.log('获取更新时间失败:', err);
    document.getElementById('date').textContent = '无法获取更新时间';
  });

注意：这个方法需要你的服务器正确配置并返回Last-Modified响应头，如果文件跨域的话还需要处理CORS规则。

2. 服务器端直接注入更新时间 #

如果你的网页是动态生成的（比如用PHP、Node.js等后端技术），这是最可靠的办法。直接在服务器端读取文件的修改时间，然后把值嵌入到HTML中。举个PHP的例子：

<!-- 在HTML里直接输出时间 -->
<div>图表更新时间：<span id="date"><?php echo date('Y-m-d H:i:s', filemtime('chart.png')); ?></span></div>

这样前端不需要额外请求，直接就能拿到准确的时间，也不会有跨域或者响应头缺失的问题。

3. 利用ETag（备选方案） #

有些服务器会返回ETag响应头，部分ETag会包含文件修改时间的哈希值，但这个不是标准格式，解析起来比较麻烦，所以只作为备选，优先用前面两种方法。

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