4

FB 如何在不重新加载页面的情况下刷新页面（xmlHttpRequest）但后退/前进按钮仍然照常工作？

这与使用history.pushState()方法无关。PushState()仅更改 URL 字符串，但在单击后退按钮后不会获取以前的页面。所以有点不一样。

这是我的代码和示例。

我有这样的网站（看下面的图片）。Header-div 和 Content-div。在你第一次打开它的开始时，URL是mysite.com/page1.php.我想改变Content-div中的内容而不重新加载页面。新信息应该出现在 Content-div 中。并且 URL 应更改为mysite.com/page2.php.

这是HTML代码。

<div id="content"></div>

<a href="" id="relaodLink">Reload Content</a>

这是它的JS代码。

document.getElementById("relaodLink").onclick = function() {
    var xmlHttp = new XMLHttpRequest();

    xmlHttp.open("GET", "page2.php", true);
    xmlHttp.send();

    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            document.getElementById("content").innerHTML = xmlHttp.responseText;
        }
    }
    return false;
}

所以 Header 不应该在按下后重新加载relaodLink，只是 Content-div 中的内容发生了变化。最重要的是：URL 应该改变，就像页面真的重新加载一样。后退按钮允许转到mysite.com/page1.php，然后前进按钮允许mysite.com/page2.php再次返回。使用history.pushState()方法它不起作用。但在 FB 后退和前进按钮工作正常。怎么做？

一只忙碌的猫
（来源：ljplus.ru）

4

1 回答 1

5

这是一个很好的问题。如果您观察，您会注意到后退按钮和前进按钮也可以在 gmail 中使用，尽管它完全基于 Ajax 构建。

浏览器的后退和前进按钮用于存储地址栏中的内容。因此，在 Ajax 中，如果您从不更改地址栏中的内容，它就不会进入历史记录，因此后退和前进按钮不起作用。

为此，您需要不断地在地址栏中添加一些内容。
例如：在gmail中，
当点击收件箱时 - https://mail.google.com/mail/？tab=mm#inbox
点击加星标时 - https://mail.google.com/mail/？tab=mm#
starred 点击发送时 - https://mail.google.com/mail/？制表符=mm#发送

所以通过这种方式，gmail不断附加到地址栏。因此历史得以保存。脸书也是如此。虽然页面没有刷新，但地址栏中的位置发生了变化——这就是这里的关键！！

我希望它对你有帮助！

于 2012-01-03T08:42:28.283 回答