JQuery & history.js后退按钮不起作用

JQuery & history.js back button not working

本文关键字：按钮 不起作用 js history amp JQuery      更新时间：2023-09-26

我正在使用历史.JS（最新）和Jquery（最新）来加载和替换网站的一部分，这一切都在工作，目前我只是想让它在现代浏览器中工作，所以我不会摆弄哈希更改。

一切似乎都正常，但是当我单击浏览器上的后退按钮（最新的FF和Chrome）时，页面不会更改（尽管URL和标题确实会更改）。我有一个谷歌和看这里，但我看不到发生了什么。

查看堆栈溢出，我发现了这个页面：使用历史记录单击后退按钮时恢复内容.js这似乎在问一个类似的问题。我已经将 #left_col（这是被替换的div）的加载内容添加到状态数据中，但我不确定从那里开始，我知道我需要在状态更改时重新加载该数据，但我看不出如何。

var History = window.History; 
var origTitle = document.title;
if ( !History.enabled ) {
    return false;
}
    
History.Adapter.bind(window,'statechange',function(){ 
    var State = History.getState();     
    History.log(State.data, State.title, State.url);
});
$('.ajaxload').live("click", function() {
    History.pushState({state:1,leftcol:$('#left_col').html()}, origTitle, $(this).attr("href"));
    $('#left_col').load($(this).attr("rel"));
    return false;
});

我真的很感激任何帮助！

更新：

我

设法让页面在用户单击返回时更改，但它没有加载正确的状态（它似乎返回了两个状态而不是一个），我添加到上述代码中的代码是：

window.addEventListener('popstate', function(event) {
    var State = History.getState(); 
    $('#left_col').html(State.data.leftcol);
});
事实证明，

我需要使用历史记录.js更新有关状态更改的页面，而不是我想象的poState。 以下是我的完整（和工作）代码，适用于可能遇到相同问题的任何人：

    var History = window.History;
    var origTitle = document.title;
    if ( !History.enabled ) { return false; }
    History.pushState({state:$(this).attr('data-state'),leftcol:$('#left_col').html()}, origTitle, $(this).attr("href"));           // save initial state to browser history
    function updateContent(data) {
        if(data == null) return;                    // check if null (can be triggered by Chrome on page load)
        $('#left_col').html(data);              // replace left col with new (or old from history) data
        History.pushState({state:$(this).attr('data-state'),leftcol:$('#left_col').html()}, origTitle, $(this).attr("href"));           // save this state to browser history
    }
    History.Adapter.bind(window,'statechange',function(){           // use this NOT popstate (history.JS)
        var State = History.getState();
        //History.log(State.data, State.title, State.url);
        updateContent(State.data.leftcol);                                          // call update content with data for left col from saved state
    });
    $('.ajaxload').live("click", function() {                                   // attach click event, get html and send it to updateContent
        $.get($(this).attr("rel"), updateContent);
        return false;
    });

当你说你需要在状态更改时重新加载数据时，你是对的，因为你必须让 javascript 撤消所做的更改或从原始状态再次渲染内容。

这可能更适合您的议程：https://github.com/thorsteinsson/jquery-routes

编辑：

您也可以考虑使用 backbone.js （http://backbonejs.org/），因为它将帮助您以一种更容易理解需要做什么的方式创建结构和抽象代码。

骨干网带有它自己的URL路由器和所谓的视图。

相关文章：