如何使 DOM 操作对 SPA 视图更改和加载起作用？

Question

我目前正在开发一个单页应用程序（遵循this tutorial）并面临两个障碍。

1. 当更改 SPA 的视图时，我尝试执行函数并在哈希发生变化并且位置哈希等于提到的名称时操作一些元素（CSS、文本等）。 问题：它不会按预期更改元素。视图加载似乎存在问题，因为我能够对整个身体进行更改，例如更改背景颜色。但不是路由器正在加载到具有 id app 的 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)