如何实现 Facebook 点赞 history.pushState 系统

Question

我有 3 个相关问题要问

问题 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

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

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

现在的问题是在 ajax 成功之后 pushed = yes 然后我想监听单击后退按钮以检索上一页内容的事件，因为在 [=21] 之后=] 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，您将观察到以下内容：

如果您在个人资料相册页面上单击一张照片，将触发 history.pushState 并使用 ajax 请求更改页面内容，现在将显示您单击的图像.
如果您单击后退按钮，将再次使用 ajax 请求来检索之前的页面内容。
如果您再次单击前进按钮，将再次使用 ajax 请求来更改页面内容以再次显示图像。
如果您现在通过单击下一个或上一个链接继续滚动浏览图像，并且 history.pushState 再次被触发并且 ajax 请求用于检索新图像，无论如何你滚动的图片很多，如果你再次点击后退按钮，你会回到第一页，即个人资料相册页面。
如果您随后再次单击前进按钮，它会将您带到您在单击后退按钮之前离开的页面。

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

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

Answer 1

根据你的第一个问题，与此相关question

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

调用 pushState 时，为数据对象提供唯一的递增 ID (uid)。
调用 onpopstate 处理程序时；根据包含最后一个状态 uid 的持久变量检查状态 uid。
用当前状态 uid 更新持久变量。
根据状态 uid 大于还是小于上一个状态 uid 执行不同的操作。

如何实现 Facebook 点赞 history.pushState 系统

How to implement Facebook like history.pushState system

browser-history

html5-history

问题 1

问题 2

最后一个问题