Question

FB如何刷新页面而不重新加载它（xmlHttpRequest）但后退/前进按钮仍可正常工作？

这与使用history.pushState()方法无关。 PushState()仅更改URL字符串，但在单击“后退”按钮后不执行任何操作以获取上一页。所以它有所不同。

这是我的代码和示例。

我有这样的网站（请看下面的图片）。 Header-div和Content-div。在您第一次打开它时，URL为mysite.com/page1.php.我想在不重新加载页面的情况下更改Content-div中的内容。新的信息应该出现在Content-div中。并且网址应更改为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;
}

因此，在按relaodLink后，Header不应重新加载，只是Content-div中的内容发生了变化。最重要的是：URL应该像页面重新加载一样改变。后退按钮允许转到mysite.com/page1.php，然后前进按钮允许再次返回mysite.com/page2.php。使用history.pushState()方法时，它不起作用。但在FB Back and Forward Buttons工作正常。如何制作？

a busy cat http://www.ljplus.ru/img4/a/_/a_ya_vishe/primer-xmlhttp_3.jpg

Answer 1

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

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

为此，您需要不断向地址栏添加内容例如：在 gmail 中，
点击收件箱后 - https://mail.google.com/mail/？标签= mm #inbox
点击加星标后 - https://mail.google.com/mail/？标签= mm＃starred
点击发送后 - https://mail.google.com/mail/？标签= mm＃已发送

因此，通过这种方式， gmail 会一直追加到地址栏。因此，历史得以保留。同样适用于 facebook 。虽然页面没有刷新，但地址栏中的位置发生了变化 - 这就是关键所在!!

我希望它可以帮到你！

FB如何重新刷新页面而不重新加载它（xmlHttpRequest）但Back按钮仍然有效？

1 个答案: