Tengo un código SPA donde uso la API de historial y las clases ES6 para insertar contenido html en el DOM dinámicamente .
Utilicé detectores de eventos como DOMContentLoaded y verifiqué las rutas de ubicación antes de ejecutar secuencias de comandos, pero aún así el contenido no está definido.
//probably be fetching from a source document.addEventListener("DOMContentLoaded",() => { // function truncateText(text,length) { // if (text.length > length) { // const truncatedText = text.substr(0,length); // return truncatedText + "..." // } // return text; // } if (window.location.pathname == "/dashboard/posts") { const posts = document.querySelectorAll('.post'); //undefined but still exists console.log(posts.length == 0 ? false : true) posts.forEach((post) => { console.log("ran") const postTextH = post.children[0].children[1].children[0] const postText = post.children[0].children[1].children[1] console.log(postText,postTextH + "here") postText.innerText = truncateText("Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco",150) postTextH.innerText = truncateText("How to never give up!",70) }) } })Entonces, mi pregunta es cómo puedo ejecutar esta función después de que el contenido de la página se cargue correctamente y obtenga las publicaciones del dom.
Este es el repositorio que estoy usando (la estructura es la misma) SPA usando API de historial y clases ES6
Si tiene una aplicación SPA, significa que el evento DOMContentLoaded se activará una vez, cuando la aplicación esté lista (no cuando navegue por las rutas).
Según su lógica, este código debe activarse cuando se cambia el historial de ubicaciones. Podría intentar cambiar su detector de eventos DOMContentLoaded a popstate :
window.addEventListener('popstate', function (event) { // The URL changed... });