基于时间动态加载不同 HTML 页面的完整实现教程-html教程-PHP中文网

基于时间动态加载不同 HTML 页面的完整实现教程

本文介绍如何根据当前时间段（如早、中、晚）自动加载并显示不同的 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 逻辑（如点击切换图片）仍可正常运行。

? 完整示例代码



  <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>⚠️ 页面加载失败<p>请检查网络或联系管理员。`;
      }
    });
  </script><!-- 初始占位内容（加载期间显示） --><div style="text-align:center; margin-top:2rem;">
    <p>正在为您匹配今日时段菜单...</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="overflowclass">DeepBI DHTML 页面生成器</a>
													<p class="overflowclass">生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：

- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；  
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；  
- 提及位于 `apps/console/src/featur</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
    <div class="spinner"></div>
  </div>

⚠️ 关键注意事项

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 文件，并确保服务器正确托管这些资源，即可开箱即用。