Question

我最近在我的网页上实现了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());

Answer 1

我知道这是一个老问题，但我遇到了同样的问题，刷新页面后导航无效，但你可以看到网址链接。

要修复只更新到最新版本的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后，一切都开始工作了。

我希望这对其他人有用。

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

1 个答案: