JQuery和history.js返回按钮无法正常工作

Question

JQuery和history.js返回按钮无法正常工作

15

我正在使用最新版的history.js和jQuery来加载和替换网站的部分内容，这一切都在工作中。目前我只想让它在现代浏览器中运行，所以我没有去研究哈希变化。一切似乎都正常工作，但是当我在浏览器上点击“返回”按钮时(最新的FF和Chrome)，页面没有改变(虽然url和标题已经改变)。我在Google上搜索以及在stackoverflow上找了找，但是我看不出到底出了什么问题。在stackoverflow上我找到了这个页面：Restoring content when clicking back button with History.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);
});

- Al_

2个回答

0

当您说需要重新加载数据时，您是正确的，因为您将不得不让JavaScript撤消所做的更改或从原始状态再次呈现内容。

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

您还可以考虑使用backbone.js（http://backbonejs.org/），因为它将帮助您以使代码易于理解的方式创建结构和抽象代码。

Backbone带有自己的URL路由器和所谓的视图。

- demux

谢谢，我非常想坚持使用History.JS，因为我想在现代浏览器上完全运行良好后，将其用于与旧浏览器的兼容性。我只是不明白需要使用哪个事件或触发器来将数据从旧状态加载回页面。 - Al_

我正在现有网站上进行设置，基本上我的目标是通过更换图像和相关评论，在站点的某个部分在页面之间移动时节省较慢的页面加载时间。我不是创建应用程序或从头开始，所以我真的只是想修复已有的问题。 - Al_

1

我认为兼容性对于backbone或jquery-routes都不是问题。如果你想坚持使用History.js，那么你需要在状态改变时检查URL，并在URL与原始URL相同时撤消更改。 - demux

是的，没错，那就是我想做的事情，但我不知道该怎么做。 - Al_

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Al_ · Accepted Answer

事实证明，我需要使用History.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;
    });