如何在SPA视图更改和加载上进行DOM操作？

Question

我目前正在处理单页应用程序（this tutorial之后），并且遇到两个障碍。

1. 当更改SPA的视图时，当哈希值发生变化并且位置哈希值等于上述名称时，我尝试执行功能并操纵某些元素（CSS，文本等）。 问题：它没有按预期更改元素。加载视图似乎存在问题，因为我能够对整个主体进行更改，例如更改背景颜色。但没有看到路由器将其加载到具有id应用程序的div中的视图。

2. 已解决。 作为一项功能，在重新加载应用程序时不会执行。

   window.addEventListener('hashchange', function(e){
   if(location.hash=='#profile')
   {
     console.log('#profile');
   }
   else if(location.hash=='#cvedit')
   {
     console.log('#cvedit');    
   }
   else if(location.hash=='#poll')
   {
     console.log('#poll');
     $("#question_text").css("color","blue");
     $("#question_text").text("Where's Waldo?");
   }
   else if(location.hash=='#about')
   {
     console.log('#about');
   
   }
   else if(location.hash='#home')
   {
     console.log('#home');
   }})             
   

Answer 1

重新加载页面浏览器不会触发hashchange事件（MDN），这就是为什么您的代码无法正常工作的原因。您可以使用DOMContentLoaded事件捕获重新加载。

window.addEventListener('hashchange', yourCallbackFunction)
window.addEventListener('DOMContentLoaded', yourCallbackFunction)