如何用JavaScript每1秒在HTML页面展示实时更新的TXT文件内容？

我来帮你解决这个实时展示文件内容的问题！你之前的代码只是打开了文件弹窗还触发了打印，完全没有自动更新的逻辑，所以才需要手动刷新。下面是完整的解决方案：

我们可以在当前页面嵌入一个内容容器，通过定时请求文件来自动更新展示内容，完全不需要手动刷新。

核心思路 #

• 在页面中添加一个专门的容器（比如<pre>标签，能保留文本的换行和格式）来展示文件内容
• 编写函数通过fetch API异步获取output.txt的最新内容
• 使用setInterval定时器，每1秒调用一次更新函数，实现内容自动刷新

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <title>实时展示文件内容</title>
    <style>
        /* 可选样式：让内容展示区更美观 */
        #contentDisplay {
            width: 100%;
            height: 400px;
            border: 1px solid #ccc;
            padding: 10px;
            overflow-y: auto;
            font-family: monospace;
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <h2>实时更新文件内容</h2>
    <!-- 用于展示文件内容的容器 -->
    <pre id="contentDisplay">正在加载文件内容...</pre>

    <script>
        // 获取页面上的内容展示容器
        const contentDisplay = document.getElementById('contentDisplay');

        // 定义获取并更新内容的异步函数
        async function updateFileContent() {
            try {
                // 发起请求获取文件最新内容
                const response = await fetch('output.txt');
                if (!response.ok) {
                    throw new Error(`请求失败：${response.status}`);
                }
                // 将响应内容转为文本格式
                const content = await response.text();
                // 更新页面上的展示内容
                contentDisplay.textContent = content;
            } catch (error) {
                // 处理加载失败的情况，给出提示
                contentDisplay.textContent = `加载失败：${error.message}`;
            }
        }

        // 页面加载完成后立即获取一次初始内容
        updateFileContent();
        // 设置定时器，每1秒更新一次内容
        setInterval(updateFileContent, 1000);
    </script>
</body>
</html>

关键代码说明 #

• <pre>标签：专门用于展示预格式化文本，能完美保留文件里的换行、空格等格式，比普通<div>更适合展示文本文件
• fetch API：现代浏览器原生支持的异步网络请求API，写法比老式的XMLHttpRequest更简洁直观
• async/await：让异步代码逻辑更清晰，可读性更强
• setInterval：设置定时任务，每1000毫秒（1秒）执行一次更新函数，实现自动刷新
• 错误处理：通过try/catch捕获请求过程中的异常，避免页面出现无响应或空白的情况

注意事项 #

• 确保output.txt和这个HTML文件放在同一目录/服务器域名下，否则会触发跨域请求拦截（本地测试时直接放在同一个文件夹即可）
• 如果文件内容较大或服务器响应较慢，可以适当延长定时器间隔（比如改为2000毫秒），避免频繁请求给服务器造成压力

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