如何在不转到另一个页面的情况下从另一个文件加载 HTML（具有 Github 页面的单页应用程序）？

Question

我正在尝试创建一个简单的博客，其中至少 <nav> 栏不会改变，因此我希望不必在每次点击时都加载它。

为了实现这一点，我正在考虑在没有 <head>、<body> 等的 HTML 文件中创建我的帖子，比如 [=15] =] 标签及其中的所有内容。然后，当用户单击 link 时，该内容将加载到当前页面，而浏览器无需加载整个新页面。但是我到底该怎么做呢？我如何 load/parse HTML 来自另一个文件？ — 我不熟悉从头开始创建单页应用程序...

我知道 DOMParser 可以将字符串解析为 HTML，但首先我必须打开文件本身并将其作为字符串读取。这是这样做的方法吗？ — 我不想将我的文章作为模板文字复制粘贴到代码本身，这使得编写 HTML 内容非常烦人且难以管理。

This is the current Github Pages website if you want to take a look at it.

Answer 1

可以用XMLHttpRequest(), but, as @charlietfl points out, the fetch API自然多了

function appendArticle(): void {
  fetch("/articles/test.html")
    .then((response: Response) => response.text())
    .then((htmlAsString: string) => {
      const parser: DOMParser = new DOMParser();

      const articleDocument: Document = parser.parseFromString(htmlAsString, "text/html");

      const article: HTMLElement = articleDocument.querySelector("article")!;

      document.body.append(article);
    });
}

// You don't need to use `document.onclick`, this is just an example...
document.onclick = (_: MouseEvent) => appendArticle();

即使在 Github 页面上下文中也能正常工作。您可能遇到的唯一问题是延迟：虽然 Github 无法更新其服务器的数据库，但 fetch 操作将 return null，您最多会在 HTML 屏幕上看到 null。

如何在不转到另一个页面的情况下从另一个文件加载 HTML（具有 Github 页面的单页应用程序）？

How to Load HTML from another file without going to another page (Single-Page App with Github Pages)?

html

javascript

github-pages

single-page-application