使用 History.js 刷新时没有持久状态答案

【问题标题】：No Persistent State On Refresh With History.js使用 History.js 刷新时没有持久状态
【发布时间】：2012-12-22 06:21:09
【问题描述】：

我最近在我的页面上实现了 History.js，但脚本存在问题。如果我转到索引页面，然后单击一个链接，事情就会像他们应该的那样工作。新内容被加载，没有页面刷新，所有导航链接仍然有效。但是，如果我在使用其中一个链接后刷新，然后单击一个链接，则 URL 会更改，但内容不会更改。我不确定发生了什么。

后退和前进按钮工作正常，使用后我可以访问导航。这是我正在使用的 javascript：

function fire()
{
var
History = window.History,
State = History.getState();

$('a').live('click', function(e)
{
    e.preventDefault();
    var path = $(this).attr('href');
    var title = $(this).attr('title');
    History.pushState('ajax',title,path);
}
);

// Bind to state change
// When the statechange happens, load the appropriate url via ajax
History.Adapter.bind(window,'statechange',function() 
    { 
        load_ajax_data();
    History.log(State.data, State.title, State.url);
    }
);

function load_ajax_data() {
 State = History.getState();   
 $.post(State.url, function(data) {
 $("#content").load(State.url + ' #contentDiv'); 
    }); 
 }
}

$(document).ready(fire());

【问题讨论】：

History.js 的文档说它解决了“状态数据和标题在站点离开然后返回（包括页面刷新）后不会持续存在”的浏览器问题，这应该意味着我可以使用导航链接，刷新页面，导航应该仍然有效。我不确定为什么没有。我将使用我在 javascript 文件中使用的代码更新我的问题。
这个问题还没有修复，所以如果有人有什么想法，请分享！
您是否设法找到任何具有刷新问题的解决方案，就像我的带有 history.js 的演示应用程序一样。请回复。谢谢

标签： php jquery history.js

【解决方案1】：

我知道这是一个老问题，但我遇到了同样的问题，刷新页面后导航不起作用，但您可以看到 url 链接。

要修复只需更新到最新版本的 History.js https://github.com/browserstate/history.js

这是我的代码：

//Under Document.ready
if (History.enabled) {
      var History = window.History;
          History.Adapter.bind(window, "popstate", function() {
                    var State = History.getState();
                    History.log(State.data, State.title, State.url);

                    if (JSON.stringify(State.data) != "{}") {
                        var obj = State.data.content;
                        search = State.data.search;
                        $("#content").html(obj);
                        $("#search").val(search);
                    }
          });
    }

因为我只想在 ajax 请求上推送状态：

//under .ajaxStop
 History = window.History;
            if (History.enabled) {
                var grid = $("#content").html();
                var search = $("#search").val();
                History.pushState({ content: grid, search: search }, "Search", "?" + $("#FormID").serialize());
            }

#content 是呈现部分视图的 div，#search 是文本框元素。

注意：我使用 Histyori.js 1.7，更新到 1.8 后一切都开始工作了。

我希望这对其他人有用。

【讨论】：