使用JavaScript在HTML文件内获取并展示自身的名称、大小及修改时间

我来帮你实现这个需求——在当前HTML文件里展示它自己的名称、大小，以及从服务器获取的最后修改时间。下面是完整的代码示例和详细说明：

完整代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示自身文件信息</title>
    <style>
        .file-info {
            margin: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-family: Arial, sans-serif;
        }
        .info-item {
            margin: 8px 0;
        }
        .label {
            font-weight: bold;
            color: #2c3e50;
        }
    </style>
</head>
<body>
    <div class="file-info">
        <h2>当前文件信息</h2>
        <div class="info-item">
            <span class="label">文件名：</span>
            <span id="fileName">-</span>
        </div>
        <div class="info-item">
            <span class="label">文件大小：</span>
            <span id="fileSize">-</span>
        </div>
        <div class="info-item">
            <span class="label">最后修改时间：</span>
            <span id="lastModified">-</span>
        </div>
    </div>

    <script>
        // 获取文件名
        function getFileName() {
            const path = window.location.pathname;
            return path.split('/').pop() || '未知文件名';
        }

        // 获取文件大小（通过Fetch请求自身）
        async function getFileSize() {
            try {
                const response = await fetch(window.location.href);
                if (!response.ok) throw new Error('请求失败');
                const blob = await response.blob();
                // 转换为友好的格式（KB/MB）
                const sizeInKB = (blob.size / 1024).toFixed(2);
                const sizeInMB = (blob.size / (1024 * 1024)).toFixed(2);
                return blob.size < 1024 * 1024 
                    ? `${sizeInKB} KB` 
                    : `${sizeInMB} MB (${blob.size} 字节)`;
            } catch (error) {
                return '无法获取大小：' + error.message;
            }
        }

        // 获取最后修改时间（通过HEAD请求获取响应头）
        async function getLastModifiedTime() {
            try {
                const response = await fetch(window.location.href, { method: 'HEAD' });
                if (!response.ok) throw new Error('请求失败');
                const lastModifiedHeader = response.headers.get('Last-Modified');
                if (!lastModifiedHeader) return '无修改时间记录';
                // 转换为本地日期格式
                const date = new Date(lastModifiedHeader);
                return date.toLocaleString();
            } catch (error) {
                return '无法获取修改时间：' + error.message;
            }
        }

        // 初始化所有信息
        async function initFileInfo() {
            document.getElementById('fileName').textContent = getFileName();
            document.getElementById('fileSize').textContent = await getFileSize();
            document.getElementById('lastModified').textContent = await getLastModifiedTime();
        }

        // 页面加载完成后执行
        window.addEventListener('load', initFileInfo);
    </script>
</body>
</html>

关键部分说明 #

• 文件名获取：通过window.location.pathname拿到当前文件的路径，再用split('/').pop()提取最后一段就是文件名，简单直接。
• 文件大小获取：利用fetch请求当前HTML文件本身，将响应转为Blob对象后，通过blob.size获取字节数，再转换为更友好的KB/MB格式展示。
• 最后修改时间获取：发送HEAD请求（只获取响应头，不下载文件内容，更高效），从响应头中提取Last-Modified字段，再转换为本地可读的日期格式。

注意事项 #

• 这个方案需要在本地服务器环境下运行（比如用Python的python -m http.server、Node.js的http-server工具），如果直接用file://协议打开HTML文件，浏览器的同源策略会限制fetch请求，导致无法获取大小和修改时间。
• 服务器需要正确返回Last-Modified响应头，大多数静态文件服务器（比如Apache、Nginx）默认都会返回这个头，但如果是自定义服务器可能需要配置。

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