使用 javascript 在所有网页上插入页眉和页脚答案

【问题标题】：Insert header and footer on all webpages using javascript使用 javascript 在所有网页上插入页眉和页脚
【发布时间】：2021-12-25 21:09:13
【问题描述】：

我创建了 index.html 文件并添加了页眉和页脚部分。我想在我的其他页面上显示它们，例如关于、联系，但我不想在所有网页上复制它们。请指导我如何使用 vanilla JavaScript 来做到这一点。

【问题讨论】：

标签： javascript header footer

【解决方案1】：

将您的页眉和页脚代码复制到 header.txt 和 footer.txt 文件，然后将此代码添加到您的 JavaScript 文件中。不要忘记：

将 JavaScript 文件包含到要显示页眉的页面中和页脚。
检查页眉和页脚 txt 文件的路径。

您还可以根据需要添加页眉和页脚代码来分隔 JavaScript 文件。

const fetchHeader = async () => {
  try {
    const res = await fetch("./header.txt");
    const template = await res.text();
    const parse = new DOMParser();
    const html = parse.parseFromString(template, "text/html");
    const header = html.querySelector("body header");

    document.body.prepend(header);
  } catch (err) {
    console.log(err);
  }
};

const fetchFooter = async () => {
  try {
    const res = await fetch("./footer.txt");
    const template = await res.text();
    const parse = new DOMParser();
    const html = parse.parseFromString(template, "text/html");
    const footer = html.querySelector("body footer");

    document.body.append(footer);
  } catch (err) {
    console.log(err);
  }
};

fetchHeader().then(fetchFooter);

如果您想添加任何类型的功能，例如单击时切换菜单，您可以这样做：

const getElements = () => {
  const nav = document.querySelector(".navbar");
  const menuBtn = document.querySelector("#menu-btn");

  menuBtn.addEventListener("click", () => {
    nav.classList.toggle("active");
  });

  window.addEventListener("scroll", () => {
    nav.classList.remove("active");
  });
};

现在调用 fetchHeader 函数后调用这个函数，因为菜单在标题中

fetchHeader().then(getElements).then(fetchFooter);
// OR
fetchHeader().then(getElements);
fetchFooter();

【讨论】：

Github 存储库：github.com/MuhammadIkram24/header-and-footer-js

【解决方案2】：

你可以使用自定义元素，目前主流浏览器应该都支持了：

<html>
    <head>
        <script src="./custom-elements.js"></script>
    </head>
    <body>
        <app-header></app-header>
    </body>
</html>

// custom-elements.js
class AppHeader extends HTMLElement {
    connectedCallback() {
        this.innerHTML = `
            <div style='border:2px solid red; padding:5px'>
                This is my header
            </div>
        `
    }
}
window.customElements.define('app-header', AppHeader)

https://developer.mozilla.org/en-US/docs/Web/Web_Components

【讨论】：

是的，即使不编写内联 css 并链接外部样式表，它也可以工作。在其他 JS 文件之前链接它也可以与其他 JS 功能一起使用。非常感谢。
如果类构造函数中附加了shadow DOM，则不会应用全局样式

【解决方案3】：

另一种可能更简单的 JavaScript 编写方式

const headerElement = document.querySelector("header");
const footerElement = document.querySelector("footer");

const fetchHeader = async () => {
  try {
    const res = await fetch("./header.txt");
    const template = await res.text();

    headerElement.innerHTML = template;
  } catch (err) {
    console.log(err);
  }
};

const fetchFooter = async () => {
  try {
    const res = await fetch("./footer.txt");
    const template = await res.text();

    footerElement.innerHTML = template;
  } catch (err) {
    console.log(err);
  }
};

fetchHeader();
fetchFooter();

【讨论】：