首页 文章

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

提问于
浏览 次
0

我们有一个单页面应用程序，我们只想确保用户始终使用最新版本的Web应用程序 .

我们简单而又简单的解决方案是检测所有锚点击并检查自页面加载后的时间是否超过24小时 . 如果是我们想要执行'full page'导航而不是'virtual page'导航 . 即，没有页面刷新，而不是去 #contact-us ，我们希望将用户发送到 http://website.com#contact-us ，其中将发生页面刷新 .

在下面的函数中，我可以检测到即将执行的'virtual'导航 . 但是，我怎么能强制整页导航和刷新？我应该将anchor 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"> 时，页面不刷新但用户'navigates'到SPA中的新页面 . 什么是这个术语？我've been calling this '虚拟页面'导航 .

  • 当用户点击链接 <a href="http://website.com#contact-us"> 时，页面会在SPA中刷新 . 什么是这个术语？我've been calling this '整页'导航 .

注意我们的 <link ..> 和 <script ...> 元素具有时间戳参数，因此在页面刷新时，它们将提取最新的Web应用程序文件 . 即， <script src="foo.js?t=201706031200" ...> .

javascript jquery backbone.js single-page-application

2 回答

  • 0

    只需做一个 window.location=... ，浏览器将完成剩下的工作;）

    回复于
  • 0
    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) {

    }
}
    回复于

相关问题