如何使用 CSS 和 JS 在不同的 .html 页面中重用导航栏？答案

【问题标题】：How to reuse a navigation bar across different .html pages with CSS and JS?如何使用 CSS 和 JS 在不同的 .html 页面中重用导航栏？
【发布时间】：2020-09-01 23:35:24
【问题描述】：

我总共有 3 页：index.html、sketch.html 和 user-profile.html。

它们都有相同的导航栏（我现在只是复制并粘贴了nav 元素），但我现在意识到这不是最好的主意。

导航栏在屏幕上的位置 (HTML)、样式 (CSS) 以及登录和注册功能 (Javascript)。我将如何将这些组合到三个不同的页面？

由于我使用的是模块捆绑器 (Parcel.js)，我正在考虑为每个页面创建一个 .js 和 .css。因此，例如文件夹index 将具有：

index.css -> 将导入必要的元素，例如（伪代码）：import "../styles/navbar.css"

index.js -> 将导入必要的记录和注册脚本，例如：require("..scripts/sessions.js");

index.html -> 将导入这两个文件

...并对每个页面执行相同操作。

但是……真的有必要吗？有更好的方法吗？

【问题讨论】：

您是否试图避免使用任何服务端语言来完成此操作？如果是这样，您可以尝试使用链接到每个页面的 JavaScript 动态创建导航栏。

标签： javascript html css parceljs

【解决方案1】：

老实说，使用原生 Javascript 实现这一点并不容易。您基本上必须使用 JS 创建导航栏，然后可以将其导入到每个页面，或者您必须复制并粘贴它。

这个问题的行业解决方案是使用 React、Vue 或 Angular，所有这些技术都允许您创建和重用 JSX '组件'。换句话说，在 React 中，你可以创建一个导航栏组件，它可以很容易地导入到网站的任何“页面”中。但是对于普通的 HTML/Javascript，它真的不是一个选择。

【讨论】：

【解决方案2】：

有一个肮脏但有效的香草 JS hack：

async function includeHTML() {
  const includes = document.getElementsByTagName('include');
  [].forEach.call(includes, include => {
    let filePath = include.getAttribute('src');
    fetch(filePath).then((file) => {
      file.text().then((content) => {
        include.insertAdjacentHTML('afterend', content);
        include.remove();
      });
    });
  });
};

现在，您可以像这样创建元素：<include src="navbar.html"></include>

只需运行该函数。如果您添加一些 javascript 功能，请使用 Promises，以便您的代码在此函数之后执行。

includeHTML()

【讨论】：