history.back（-1）没有刷新最后一页？

Question

我正在使用Rails 4创建像模态覆盖的Pinterest。它们显示在无限滚动页面的半透明覆盖上。

目前，当您单击该链接时，浏览器的历史记录将更改为反映您正在查看的项目。 但是我有一个退出按钮，按下时，我想让它删除覆盖（它已经做了），但然后更改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

最好的解决方案是使用某种路由脚本。 像戴维斯，萨米，十字路口，导演，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，你可以弹出，或者只是继续追加到数组中。 并做你的其他行动。