JQuery& history.js后退按钮不起作用 [英] JQuery & history.js back button not working

问题描述

我正在使用带有Jquery（最新）的history.JS（最新）加载和替换网站的一部分，这一切都正常，目前我只是想让它在现代浏览器中运行所以我'我没有摆弄哈希变化。

I'm using history.JS (latest) with Jquery (latest) to load and replace just a portion of a website, this is all working, currently I'm only trying to get it working in modern browsers so I'm not fiddling with the hash changes.

一切似乎都有效，但是当我点击浏览器上的后退按钮（最新的FF& Chrome）时，页面不会改变（虽然网址和标题确实有所改变）。我有一个谷歌，看看这里，但我看不到发生了什么。

Everything seems to work, however when I click the back button on the browser (latest FF & Chrome) the page does not change (although the url and title do change). I've had a google and a look on here but I can't see what is happening.

查看堆栈溢出我找到了这个页面：点击带有History.js的后退按钮时恢复内容，似乎问了类似的问题。我已经将#left_col（这是被替换的div）的加载内容添加到状态数据中，但我不确定从那里开始，我知道我需要在状态发生变化时重新加载该数据，但我看不出如何。

Looking on stack overflow I found this page: Restoring content when clicking back button with History.js which seems to be asking a similar question. I've add the loaded contents of the #left_col (which is the div being replaced) to the state data, but I'm not really sure where to go from there, I know I need to reload that data when the state changes, but I can't see how.

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;
});

我非常感谢任何帮助！

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

I managed to get the page to change on the user clicking back, but it doesn't load the right state (it seems to go two states back rather than one), the code I've added to the above code is:

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

推荐答案

事实证明我需要在statechange上更新页面使用History.js，而不是像我想的那样poState。以下是我可能遇到同样问题的完整（和工作）代码：

It turns out I needed to update the page on statechange using History.js, not poState as I'd thought. below is my full (and working) code for anyone who may be having the same issue:

    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;
    });

这篇关于JQuery& history.js后退按钮不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！