Question

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

目前，当您点击该链接时，浏览器的历史记录会发生变化，以反映您正在查看的项目。但是我有一个退出按钮，当按下它时，我想让它删除覆盖（它已经做了），但是然后更改URL而不会丢失用户在无限滚动上的位置。

如果不刷新最后一页，pinterest究竟如何完成更改URL？我会使用pushState和＆＃39; /＆＃39;但我有多种类型的无限滚动页面，我喜欢这个脚本适用于所有这些页面。

的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，你可以弹出，或者只是继续追加到数组中。并做你的其他行动。

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

1 个答案: