javascript - history.back(-1) 没有刷新最后一页？

Question

我正在使用 Rails 4 创建类似模态叠加层的 Pinterest。它们显示在无限滚动页面顶部的半透明叠加层中。

目前，当您单击链接时，浏览器的历史记录会更改以反射(reflect)您正在查看的项目。但是我有一个退出按钮，当按下它时，我想让它删除叠加层(它已经这样做了)，然后在不丢失用户在无限滚动中的位置的情况下更改回 URL。

pinterest 究竟是如何在不刷新最后一页的情况下完成改回 URL 的？我会使用带“/”的 pushState，但我有多种类型的无限滚动页面，我希望该脚本适用于所有这些页面。

application.js

if (history && history.pushState){
  $(function(){
   $('body').on('click', 'a', function(e){
      $.getScript(this.href);
      history.pushState(null, '', this.href);
    });
    $(window).bind("popstate", function(){
      $.getScript(location.href);
    });
  });
}

关闭覆盖脚本

function removeDabble() {
    history.back(-1);

    /*var elem = document.getElementById('artview');
    elem.parentNode.removeChild(elem);
    return false;*/
}

Answer 1

最佳解决方案是使用某种路由脚本。比如davis, sammy, crossroads, director, routes.js ....有很多选择。

您可以在不刷新页面的情况下轻松实现 pushstate/hashtag 样式。这些插件可以帮助您处理不支持 pushstates 的命令浏览器。

如果您不需要照顾旧浏览器。您可以通过以下方式更改网址而无需刷新页面

// this go to the new url
window.history.replaceState(“”, “Title”, “/newUrl”);

// first param is if you want to parse some data around, but its best to just use localstorage/session storage or cookie, and a event listener. 

// second parameter is the page title, some browser ignores it

// last param is the url  eg : 
        '/newUrl'   => .com/newUrl,  
        '/1/2/3'    => .com/1/2/3

实现history.back，如你所愿。你可以在

中创建一个新数组

例如:browserHistory = []

在每次更改 url 时，将 url 插入该数组，我通常将限制设置为 10，它会丢弃较早的，但这取决于您。

function updateHistory(url) {
    window.browserHistory = window.browserHistory? window.browserHistory : [];
    if (window.browserHistory.length > 10) {
         window.browserHistory = window.browserHistory.shift()
    }
    window.browserHistory.push(url)
}

与我们自己的 history.back 版本相比，您只需使用上述方法替换数组中的最后一个 url，您可以弹出，或者为此继续追加到数组。并执行其他操作。