如何在SPA中强制进行全页面导航而不是虚拟页面导航

我们有一个单页面应用程序，我们只是想确保用户将始终使用最新版本的Web应用程序。如何在SPA中强制进行全页面导航而不是虚拟页面导航

我们简单的解决方案虽然很冒险，但它可以检测到所有锚点，并检查自页面加载大于24小时以来的时间。如果是我们想要执行“整页”导航而不是“虚拟页面”导航。也就是说，我们不是要去#contact-us而是不刷新页面，我们想要发送用户到http://website.com#contact-us刷新页面的地方。

在下面的函数中，我可以检测即将执行的'虚拟'导航。但是，我如何强制整页导航和刷新？我是否应该将锚点href属性更改为完整的网站路径，然后允许该事件传播？或者我应该做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：什么是以下正确的术语：

当用户点击该链接<a href="#contact-us">页面不刷新，但用户“导航”在SPA了新的一页。这是什么意思？我一直在称这个'虚拟页面'导航。
当用户点击链接<a href="http://website.com#contact-us">时，页面在SPA中刷新。这是什么意思？我一直在称这个'整页'导航。

注我们<link ..>和<script ...>元素具有时间戳参数，以便在刷新页面，他们会拉最新的Web应用程序文件。即，<script src="foo.js?t=201706031200" ...>。

来源

2017-06-03 Jake M

点击一个锚定标记触发[hashchange事件]（https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange）主动导航到另一个页面会触发[popstate event]（https://developer.mozilla.org/en-US/docs/Web/Events/popstate ）（除其他事项外）。也许看看[Window.location]的文档（https://developer.mozilla.org/en-US/docs/Web/API/Window/location）。它可能会给你一些想法。 – Brice

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) { 
 

 
    } 
 
}

来源

2017-06-03 02:51:24 Brice

感谢您的评论和答复。 'href.reload（true）'不会重载当前页面，而不是用户试图导航到的页面？ –

我不这么认为，因为你是不是将'var href'设置为你正在点击的锚点标记的href属性的值： 'href = ev.currentTarget.attr（' href'）'？ – Brice

只是做一个window.location=...和浏览器将完成剩下的）

来源

2017-06-07 09:18:40 vassiliskrikonis

如何在SPA中强制进行全页面导航而不是虚拟页面导航

回答

相关问题