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

FB如何刷新页面而不重新载入（xmlHttpRequest），但后退/前进按钮仍然照常工作？FB如何刷新页面而不重新加载（xmlHttpRequest）但后退按钮仍然有效？

这不是关于使用history.pushState()方法。 PushState()只会更改网址字符串，但在您点击“返回按钮”后无法获取以前的查看页面。所以它与众不同。

这是我的代码和示例。

我有这样的网站（看下面的图片）。标题div和内容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，在内容DIV的变化只是内容后重装。而最重要的是：网址应该像页面一样改变，真正重新加载。后退按钮允许转到mysite.com/page1.php，然后转发按钮允许再次返回到mysite.com/page2.php。使用history.pushState()方法不起作用。但在FB后退和前进按钮中工作正常。如何做到这一点？

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

来源

2012-01-03 Green

这是一个很好的问题。如果你注意到，你可以注意到后面的按钮和向前的按钮也可以在gmail中工作，尽管它完全建立在Ajax上。

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

为了这个工作，你需要不断追加一些东西到地址栏。
例如：在gmail,
当收件箱被点击 - https://mail.google.com/mail/？ tab = mm＃收件箱
单击星号时 - https://mail.google.com/mail/？ tab = mm＃starred
单击发送时 - https://mail.google.com/mail/？ 标签= MM＃发送

所以在这种方式，的Gmail不断追加到地址栏。因此历史被保留。 facebook也是如此。虽然页面没有刷新，但地址栏中的位置发生了变化 - 这里是关键！

我希望它能帮助你！

来源

2012-01-03 08:42:28 GuruC

反正它不起作用。要改变地址栏中的地址，我这样做'window.location.hash =“＃page2”;'。因此，结果与'history.pushState（）'相同 - 网址更改后，历史记录中出现一步，但不会显示先前的页面。只有地址栏从一个变为另一个'mysite.com/page1.php'到'mysite.com/page1。PHP＃page2'并返回。内容保持不变。 – Green 2012-01-14 12:56:37

@GuruC有没有人有关于此的更多信息？我不确定如何让这个工作。 – 2013-02-12 15:06:40

当我聊天并点击左侧菜单中的一个链接时，URL完全更改（不仅是＃部分），而且聊天菜单也不会闪烁。我不知道它发生得太快，因为如果我通常点击刷新我注意到页面重新加载。 – Tanmoy 2014-03-28 19:39:56

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

回答

相关问题