history.back(-1) 不刷新最后一页？答案

【问题标题】：history.back(-1) without refreshing the last page?history.back(-1) 不刷新最后一页？
【发布时间】：2014-05-12 20:52:05
【问题描述】：

我正在使用 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;*/
}

【问题讨论】：

我也很好奇这个。你有没有遇到过解决方案？
不，我不相信这是可能的。我的印象是 Pinterest 管理它，但由于使用该网站多一点，它似乎不是那样。
我正在尝试做类似的事情，但没有找到解决方案。

标签： javascript jquery ruby-on-rails html html5-history

【解决方案1】：

最好的解决方案是使用某种路由脚本。像 davis、sammy、crossroads、director、routes.js .... 有很多选择。

您无需刷新页面即可轻松实现前后推送状态/主题标签样式。这些插件可以帮助你处理不支持推送状态的订单浏览器。

如果您不需要照顾旧的浏览器。您可以更改 url 而无需刷新页面

// 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，您可以弹出，或者继续附加到数组中。并执行其他操作。

【讨论】：