时间戳

首页 > 解决方案 > 如何使用 javascript 为项目中的每个文件创建一个 html 标头？

javascript - 如何使用 javascript 为项目中的每个文件创建一个 html 标头？

问题描述

我正在使用 HTML 和 javascript 开发一个简单的 GitHub 页面站点。由于页面不支持 PHP 或 SSI 包含来自单独 HTML 文件的 HTML 标头，因此我需要编写一个脚本来创建标头图像并在菜单功能区中建立链接。

假设为了理解这个网站由三个文件组成，其路径是：

root/index.html
root/A/pageA.html
root/B/pageB.html

标头应该有一个指向这些文件的链接。

我能想出的唯一解决方案是在所有文件中使用这些：

<a href='https://somewhere.something/index.html'>Index</a>
<a href='https://somewhere.something/A/pageA.html'>A</a>
<a href='https://somewhere.something/B/pageB.html'>B</a>

我只是不确定这是否是一个好习惯！

如果有一种方法可以实现更传统的相同效果，我很想听听。

标签： javascripthtmlheaderconventions

解决方案

下面的 SO 代码段不起作用，但这里是工作示例- 单击左侧菜单，查看页面源代码）

async function load(url) {
  let html = await (await fetch(url)).text();
  pageBody.innerHTML = html;
}

let page = location.search.substr(1) || 'index';

load(page + '.html');
<h1>My site</h1>
<ul>
  <li><a href="?index" >Main</a></li>
  <li><a href="?A/pageA" >A</a></li>
  <li><a href="?B/pageB" >B</a></li>
</ul>

<div id="pageBody">

推荐阅读