如何实现Facebook的历史.pushState系统

Question

我有三个相关的问题要问

问题1

在window.addEventListener('popstate', function(e)上，我如何知道被按下的按钮是forward()还是back()按钮?例如

window.addEventListener('popstate', function(e){
    var buttonDirection = // the button that was clicked
    if(buttonDirection == history.back()){
        // blah blah blah
    } else if(buttonDirection == history.forward()){
        // blah blah blah
    }
})

问题2

我想pushState之后ajax成功为了改变页面内容所以我这样做了，我真的不知道这是不是最好的方法

$.ajax({
    url: 'path.php',
    success: function(data){
        $('html').html(data);
        history.pushState('', '', 'path.php');
        var pushed = 'yes';
    }
})

现在问题是在ajax成功和pushed = yes之后，然后我想在单击后退按钮以检索前页内容时收听事件，因为在history.pushState之后forward()按钮被禁用，所以我这样做了

window.addEventListener('popstate', function(e){
    if(pushed == 'yes'){
        // run code to restore back previous page content
        $.ajax({
            url: 'current_page.php',
            success: function(data) {
                $('html').html(data);
                pushed = 'yesBack';
            }
        });
    }
    // now I want to run another code to replace the page content again if the forward button is clicked and pushed is == yesBack
    // that's where my reason for question 1 come out
    // so how do I know if the button that was clicked is the forward
})

最后一个问题

如果你在移动浏览器上研究Facebook，你会看到:

1. 如果你在个人资料相册页面上，你点击一张照片，history.pushState被触发，ajax请求被用来改变页面内容，现在将显示你点击的图像。
2. 如果您点击后退按钮，ajax请求将再次用于检索上一页内容。
3. 如果您再次点击转发按钮，ajax请求将再次用于更改页面内容以再次显示该图像。
4. 如果你现在通过点击下一个或上一个链接继续滚动图像，history.pushState再次被触发，ajax请求用于检索新图像，无论你滚动了多少图像，如果你再次点击后退按钮，它会带你回到第一页，这是个人资料相册页面。
5. 如果你再次点击前进按钮，它会把你带到你离开的页面，然后再点击后退按钮。

现在我的第三个问题是我如何在我自己的网页上实现所有这些观察结果。

我试着查看Facebook的源代码，但我无法理解它或找到任何地方的history.pushState被触发。请问有没有人对我列出的问题有答案或者我可以阅读得到答案的文档

Answer 1

根据你的第一个问题，关于这个问题

你必须自己实现它，这很容易。

• 当调用pushState时给数据对象一个唯一的递增id (uid)。
• onpopstate处理器被调用时;根据包含最后状态uid的持久变量检查状态uid。
• 用当前状态uid更新持久变量
• 根据状态uid大于或小于最后状态uid执行不同的操作。