Creé el archivo index.html y agregué secciones de encabezado y pie de página. Quiero mostrarlos en mis otras páginas como acerca de, contacto, pero no quiero copiarlos en todas las páginas web. Por favor, guíame, ¿cómo puedo hacerlo usando Vanilla JavaScript?
Copie su código de encabezado y pie de página en los archivos header.txt y footer.txt y luego simplemente agregue este código a su archivo JavaScript. No olvides:
También puede agregar código de encabezado y pie de página para separar archivos JavaScript como desee.
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);Si desea agregar algún tipo de funcionalidad, como alternar el menú al hacer clic, puede hacer esto:
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"); }); };Ahora llame a esta función después de llamar a la función fetchHeader porque el menú está en el encabezado
fetchHeader().then(getElements).then(fetchFooter); // OR fetchHeader().then(getElements); fetchFooter();Puede usar elementos personalizados, a estas alturas debería ser compatible con los principales navegadores:
<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)Otra puede ser una forma más simple de escribir 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();