问题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，您将会观察到这一点：

如果您在个人资料图片相册页面上并点击了照片，则history.pushState会被触发，ajax请求会用于更改页面内容，现在该内容将显示您点击的图片。< / LI>
如果单击后退按钮，将再次使用ajax请求来检索上一页内容。
如果再次点击前进按钮，则再次使用ajax请求更改页面内容以再次显示图像。
如果您现在继续通过单击下一个或上一个链接滚动浏览图像，并再次触发history.pushState并且ajax请求用于检索新图像，无论图像多少滚动后，如果再次单击后退按钮，则会转到第一页，即个人资料相册页面。
如果您再次单击前进按钮，则会在单击后退按钮之前转到您停止的页面。

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

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

Answer 1

根据您的第一个问题，与此question

有关

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

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

如何实现像history.pushState系统的Facebook

问题1

问题2

最终问题

1 个答案: