本文介绍如何根据当前时间段（如早、中、晚）自动加载并显示不同的 html 页面，涵盖页面切换逻辑、异步内容获取、dom 替换及实际部署注意事项。
本文介绍如何根据当前时间段（如早、中、晚）自动加载并显示不同的 html 页面，涵盖页面切换逻辑、异步内容获取、dom 替换及实际部署注意事项。
在 Web 开发中，有时需要根据一天中的不同时段（例如早餐时段 7:00–11:59、午餐时段 12:00–16:59、晚餐时段 17:00–23:59）动态展示对应主题的 HTML 页面（如 breakfast.html、lunch.html、dinner.html）。这比单纯切换图片更复杂，需安全加载外部 HTML 内容，并完整替换当前页面结构（包括标题、样式、脚本和交互元素）。
以下是一个健壮、可维护、符合现代 Web 标准的实现方案：
✅ 核心思路
- 使用 Date.getHours() 获取当前小时，映射到预定义的时间段；
- 通过 fetch() 异步请求目标 HTML 文件；
- 利用 DOMParser 解析返回的 HTML 字符串为独立文档对象；
- 安全提取其
和 内容，注入当前页面（避免直接 document.write 或 innerHTML = ... 全量覆盖引发脚本失效或 XSS 风险）； - 支持页面内导航（如多图轮播页）——因新页面 DOM 已完整载入，原有 JavaScript 逻辑（如点击切换图片）仍可正常运行。
? 完整示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>时段专属菜单</title>
<script>
// 步骤 1：定义各时段对应的 HTML 页面路径
const timeBasedPages = {
breakfast: '/html/breakfast.html', // 06:00 – 11:59
lunch: '/html/lunch.html', // 12:00 – 16:59
dinner: '/html/dinner.html', // 17:00 – 23:59
night: '/html/night.html' // 00:00 – 05:59
};
// 步骤 2：根据当前时间返回应加载的 URL
function getCurrentPageUrl() {
const hour = new Date().getHours();
if (hour >= 6 && hour < 12) return timeBasedPages.breakfast;
if (hour >= 12 && hour < 17) return timeBasedPages.lunch;
if (hour >= 17 && hour < 24) return timeBasedPages.dinner;
return timeBasedPages.night; // 0–5 点
}
// 步骤 3：异步加载并解析 HTML
async function loadHtmlPage(url) {
try {
const response = await fetch(url);
if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
const htmlText = await response.text();
const parser = new DOMParser();
return parser.parseFromString(htmlText, 'text/html');
} catch (err) {
console.error('页面加载失败:', err);
throw err;
}
}
// 步骤 4：安全替换当前页面内容
function replaceDocumentContent(newDoc) {
// 更新页面标题
document.title = newDoc.title || '时段菜单';
// 清空 body 并注入新内容（保留当前 <head> 中的全局样式/脚本）
document.body.innerHTML = newDoc.body.innerHTML;
// ⚠️ 注意：若新页面含内联脚本（<script>），默认不会执行。
// 如需执行，请手动遍历并 append（见下方“进阶提示”）
executeInlineScripts(newDoc.body);
}
// 辅助函数：执行新页面中所有内联 script 标签（可选）
function executeInlineScripts(node) {
const scripts = node.querySelectorAll('script');
scripts.forEach(script => {
if (!script.src) { // 仅处理内联脚本
const newScript = document.createElement('script');
newScript.textContent = script.textContent;
document.head.appendChild(newScript);
}
});
}
// ✅ 启动：页面加载完成后立即执行
document.addEventListener('DOMContentLoaded', async () => {
try {
const url = getCurrentPageUrl();
const doc = await loadHtmlPage(url);
replaceDocumentContent(doc);
} catch (err) {
document.body.innerHTML = `<h2>⚠️ 页面加载失败</h2><p>请检查网络或联系管理员。</p>`;
}
});
</script>
</head>
<body>
<!-- 初始占位内容（加载期间显示） -->
<div style="text-align:center; margin-top:2rem;">
<p>正在为您匹配今日时段菜单...</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<div class="spinner"></div>
</div>
</body>
</html>⚠️ 关键注意事项
- CORS 限制：fetch() 加载同域 HTML 没问题；若跨域，需服务端配置 Access-Control-Allow-Origin，否则会报错。
- 脚本执行：DOMParser 解析的 <script> 默认不执行（安全机制）。如目标 HTML 依赖 JS 初始化（如轮播图），请使用 executeInlineScripts() 函数显式执行（如上所示），或改用模块化方式将逻辑抽离至外部 .js 文件并在主页面统一加载。</script>
- SEO 与爬虫：纯前端时段切换对搜索引擎不友好（爬虫看到的是初始空页）。如需 SEO 支持，建议服务端渲染（如 Node.js/Nginx 根据 User-Agent + 时间头响应不同 HTML）。
-
缓存控制：为防止旧页面被缓存，可在 fetch 中添加缓存策略：
fetch(url, { cache: 'no-store' }) - 降级方案：添加 try/catch 和错误 UI（如上例），确保用户始终有明确反馈。
✅ 总结
该方案以语义清晰、分层解耦的方式实现了「按时间加载 HTML 页面」的核心需求：从时间判断 → 动态 URL 选择 → 安全内容获取 → DOM 注入 → 脚本补救，每一步都兼顾兼容性、安全性与可维护性。无论是单页菜单还是含交互的多图页面（如您提到的 HTML2.html 中可点击切换的三张图片），均可无缝支持——因为整个
已被完整替换，原有事件监听器与逻辑自然生效。只需将 timeBasedPages 对象中的路径指向您的真实 HTML 文件，并确保服务器正确托管这些资源，即可开箱即用。
