使用History.js的HTML5 pushState。无法从State.data检索数据

时间:2012-02-29 17:58:11

标签: html5 pushstate history.js

我可以将数据设置为History.js的State.data,如下所示:

var pushStateData = {};

function RetrieveSearchResults(type, url, searchData) {//, showResetButton, 
controlToFocus, navDirection) {

    pushStateData = {
        SearchType : type,
        SearchData : searchData,
    };

    RetrievePageResults(true, url, pushStateData);
}

function RetrievePageResults(pushNewUrl, url, pushStateData) {
    navigationInProgress = true;
    if (pushNewUrl) {
        if (window.History) {
                window.History.pushState(pushStateData, null, url);                                            
        }

        $.get(url, pushStateData.SearchData, function (reply) {
            $("#search-results").html(reply);
            navigationInProgress = false;            
        });
    }

如果我在window.History.pushState语句中设置断点,在Chrome中,我可以清楚地看到pushStateData具有所需的值。

但是,当我尝试检索数据时:

$(window).bind("statechange", function (e) {
        if (!navigationInProgress) { 
            var State = window.History.getState();

            if (window.console && window.console.log) {
                console.log("popstate", State, window.location.href);
            }

            RetrievePageResults(false, State.cleanUrl, State.data);
        }
    });

当我在RetrievePageResults语句上设置断点时, State.data对象不再具有我设置的任何值。 State.data是定义的,不是null,但它是一个没有任何明显值的空对象。

谢谢, 斯科特

1 个答案:

答案 0 :(得分:5)

我没有看到State.data有什么问题,当你发出pushState时,请确保你调用History.js方法:

History.pushState({state:1}, "State 1", "?state=1");

其中:

  • 第一参数=>数据
  • 第二参数=>名称
  • 第三参数=>网址

似乎你没有通过状态,只有当你调用History.pushState时才会出现数据。当您直接访问URL(/?state = 1)时,状态中没有数据,只有在通过History.pushState推送状态时向后/向前导航时才能使用数据。

旁注:确保您的navigationInProgress变量已修复,您不希望它在那里停滞。在侦听错误回调时,$ .get请求失败时重置它。当pushNewUrl为false时,重置navigationInProgress属性。