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）但後退按鈕仍然有效？

回答

相關問題