访问pushState状态对象内容

Question

$(function(){
    $('button').click(function(e){
        e.preventDefault();

        var nextUrl = 'page1.html';
        var previousUrl = window.location.href;

        $.get(nextUrl, function(data){
            $('body').html(data);
            history.pushState({content: data}, '', nextUrl); <--How to retrieve the content data
        });
    });
    $(window).bind('popstate', function(e){
        console.log(e.state.content);
        //How do I get the data stored in pushState?
    });
});
</script>

我已经将整个页面信息存储在状态pushState({content:data}..中，但是如何在popstate中检索它呢？

谢谢!

Answer 1

您将使用下面的代码行

window.history.state['content']

Answer 2

当活动的历史记录条目改变时，在窗口上触发popstate事件。最常见的情况是单击浏览器的back或forward按钮(或者执行对back()、forward()或go()的调用)。

传入侦听器回调的事件包含一个state属性，该属性用于检索与历史记录项关联的状态对象。

window.addEventListener('popstate', function(event) {
  var state = event.state;
});

值得注意的是，对pushState()和replaceState()的调用不会触发popstate事件。

Chrome和Safari会在页面加载时触发popstate事件，而Firefox不会。