使用 javascript 在所有网页上插入页眉和页脚
Posted
技术标签:
【中文标题】使用 javascript 在所有网页上插入页眉和页脚【英文标题】：Insert header and footer on all webpages using javascript 【发布时间】：2021-12-25 21:09:13 【问题描述】：我创建了 index.html 文件并添加了页眉和页脚部分。我想在我的其他页面上显示它们，例如关于、联系，但我不想在所有网页上复制它们。请指导我如何使用 vanilla javascript 来做到这一点。
【问题讨论】：
【参考方案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();
【讨论】：
以上是关于使用 javascript 在所有网页上插入页眉和页脚的主要内容，如果未能解决你的问题，请参考以下文章