Quiero animar mi barra de navegación usando JavaScript. Creé un navbar.html separado y lo incluí usandocsi.min.js. Cuando intento getElementById mi barra de navegación, mostrar y ocultar el botón. devuelve nulo y cuando lo prueba en la consola de desarrollo funciona.
barra de navegación.html:
<nav> <div class="site-mobile-menu collapse navbar-collapse show" id="main-navbar"> navbar content </div> <nav>índice.html:
<div data-include="/src/navbar.html"></div> <script src="/src/js/navbar.js"></script>barra de navegación.js:
window.addEventListener("load", function() { // debugger; var mobNav = document.getElementById("main-navbar"); var showNavBtn = document.querySelector("#show-nav"); var hideNavBtn = document.getElementById("hide-nav"); console.log(mobNav + " " + showNavBtn + " " + hideNavBtn); if (!mobNav == null || !showNavBtn == null || !hideNavBtn == null) { showNavBtn.onclick = function() { console.log("clicked"); mobNav.classList.add("nav-shown"); } } else { console.log("Error Opening Mobile Navbar"); } }, false);Cuando se load la ventana, los elementos como #main-navbar no están en el DOM, csi los agrega más tarde.
Idealmente, csi daría una opción para notificar cuando se carga un elemento [data-include] pero no lo hace. Puedo sugerir 2 formas:
// this is csi re-implementation function fetchTemplates() { return Promise.all( [...document.querySelectorAll('[data-include]')].map(async el => { const response = await fetch(el.getAttribute('data-include')); const html = await response.text(); el.outerHTML = html; })); } // now you can call fetchTemplates and wait for it to done (async () => { await fetchTemplates() console.log('templates are loaded. you can now find #main-navbar'); console.log(document.querySelector('#main-navbar')); })();https://codesandbox.io/s/zealous-jepsen-12ihl?file=/re-implement-csi.html
MutationObserver para detectar cuándo csi reemplaza el elemento con el contenido obtenido. const div = document.querySelector('[data-include="/src/navbar.html"]'); const observer = new MutationObserver(function (mutationsList, observer) { const templates = document.querySelectorAll('[data-include]'); if (templates.length === 0) { console.log('all templates loaded, now you can find #main-navbar'); console.log(document.querySelector('#main-navbar')); } // we no longer should observe the div observer.disconnect(); }); observer.observe(div.parentElement, { childList: true, });https://codesandbox.io/s/zealous-jepsen-12ihl?file=/index.html
Personalmente recomiendo la primera opción porque
XMLHttpRequest ).