Comment forcer la navigation de la page entière plutôt que la navigation de la page virtuelle dans SPA

Question

Nous avons une application d'une seule page et nous voulons juste nous assurer que l'utilisateur travaillera toujours avec la dernière version de l'application web. Notre solution simple, bien que hacky, consiste à détecter tous les clics d'ancrage et à vérifier si le temps écoulé depuis le chargement de la page est supérieur ou égal à 24 heures. Si c'est le cas, nous voulons effectuer une navigation «pleine page» plutôt qu'une navigation «page virtuelle». C'est-à-dire, au lieu d'aller à #contact-us sans rafraîchissement de la page, nous voulons envoyer l'utilisateur à http://website.com#contact-us où une actualisation de la page se produira.

Dans la fonction ci-dessous, je peux détecter une navigation «virtuelle» sur le point d'être effectuée. Mais comment puis-je forcer une navigation pleine page et rafraîchir? Dois-je changer l'attribut ancre href pour le chemin complet du site Web, puis autoriser la propagation de l'événement? Ou devrais-je simplement faire window.location = ...;?

events: { 
     'click a[href!=""]': 'onClick' 
} 

onClick: function(ev) 
{ 
    try { 

     var now      = new Date() 
     , hoursSinceLastRefresh = Math.abs(now - this.lastRefresh)/36e5 
     , href     = ev.currentTarget.attr('href') 
     , isVirtualNavigation  = href.substr(0,1) === '#' 
     , pageExpired    = hoursSinceLastRefresh >= 24; 

     // if is internal navigation 
     if (isVirtualNavigation && pageExpired) 
      // How can I force a 'full page' navigation not a virtual navigation? 

    } 
    catch (ex) { 

    } 
} 

PS: quels sont les termes appropriés pour les éléments suivants:

• Lorsqu'un utilisateur clique sur le lien <a href="#contact-us"> la page ne se recharge pas, mais l'utilisateur « navigue » à une nouvelle page dans le SPA. Quel est le terme pour cela? J'ai appelé cette navigation 'page virtuelle'.
• Lorsqu'un utilisateur clique sur le lien <a href="http://website.com#contact-us">, la page est actualisée dans le SPA. Quel est le terme pour cela? J'ai appelé cette navigation "pleine page".

Remarque Notre <link ..> et <script ...> éléments ont des paramètres d'horodatage afin lors de rafraîchir la page ils tirer les derniers fichiers d'applications Web. C'est-à-dire <script src="foo.js?t=201706031200" ...>.

Answer 1

events: { 
 
     'click a[href!=""]': 'onClick' 
 
} 
 

 
onClick: function(ev) 
 
{ 
 
    try { 
 

 
     var now      = new Date() 
 
     , hoursSinceLastRefresh = Math.abs(now - this.lastRefresh)/36e5 
 
     , href     = ev.currentTarget.attr('href') 
 
     , isVirtualNavigation  = href.substr(0,1) === '#' 
 
     , pageExpired    = hoursSinceLastRefresh >= 24; 
 

 
     // if is internal navigation 
 
     if (isVirtualNavigation && pageExpired){ 
 
      href.reload(true); 
 
     } 
 
    } 
 
    catch (ex) { 
 

 
    } 
 
}

Answer 2

Il suffit de faire un window.location=... et le navigateur fera le reste;)