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

Question

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

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

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

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

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

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

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

...并为每一页做同样的事情。

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

Answer 1

老实说，使用 vanilla Javascript 没有简单的方法来做到这一点。您基本上必须使用 JS 创建导航栏，然后可以将其导入到每个页面，或者您必须复制并粘贴它。

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

Answer 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>

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

includeHTML()