Question

我正在使用history.js在AJAX产品页面上启用后退/前进浏览器导航。 AJAX功能基于点击产品类别。

我的工作做得很好 - 除了我遇到的一个问题。第一页未存储在历史记录中。这是我的代码：

HTML：

<ul class="category">
    <li><a href="/category/5">Category 5</a></li>
    <li><a href="/category/10">Category 10</a></li>
</ul>

JS：

$(document).ready(function(){

    var
        History = window.History,
        State = History.getState();

    $('.category a').click(function(){

        var path = $(this).attr('href');
        var title = $(this).next().text();
        var category = $(this).attr('data-cat');

        History.pushState({category: category}, title, path);

        return false;
    });

});


History.Adapter.bind(window, 'statechange', function() {
    var State = History.getState();
    var category = State.data.category;

    myAjaxFunction(category); // function which refreshes the product container
});

现在假设我加载了URL：// mysite / category / 10

然后我点击第5类 - 我得到URL：// mysite / category / 5

然后我单击“后退”按钮 - URL不会更改，AJAX函数会返回错误的结果集

我做了一个console.log，它告诉我“State.data.category”未定义。

看起来初始页面没有存储在历史会话中，我尝试在页面加载时强制使用History.pushState，但这意味着'statechange'事件也会在页面加载时触发，这是不必要的。

有没有人对如何解决这个问题有任何想法？

Answer 1

您可以通过jQuery将 statechange 事件调用到：

$(document).ready(function(){ 

    ...

    jQuery(window).trigger('statechange');

});

history.js - 初始页面未存储在历史记录中

1 个答案: