如何修改facebook的照片查看器的歷史記錄？

Question

我在我的網站上有類似Facebook的照片瀏覽器的彈出窗口模式。當模式打開時，它將顯示來自其他頁面的內容，我想更改地址欄值和歷史記錄以顯示此內容。

模式中有一個下拉框將模態中的內容更改爲不同頁面的內容。發生這種情況時，我再次想要更改地址欄值和歷史記錄以顯示頁面已更改。

從本質上講，我想正是複製Facebook的照片瀏覽器中，您可以通過嘗試行爲：

1. Clicking on this link
2. 點擊Photos
3. 點擊頁面上的照片
4. 單擊向右或向左箭頭（或使用鍵盤上的箭頭鍵）更改內部值
5. a）單擊在瀏覽器中
6. B）前進和後退歷史記錄按鈕點擊了圖片瀏覽器

我試圖創建一個的jsfiddle來展示我在這個地方，但的jsfiddle顯然不會讓歷史被操縱。因此，我已經把my code online here和you can download from here。

---

幾個關鍵點：

• 開始通過查看索引頁，然後使用鏈接轉到測試頁
• 當模式被關閉時，按下後退按鈕應該不是重新打開模式，而是應該帶你回到索引頁面。
• 在URL關閉模式，按下正向按鈕應該重新打開該模式在它的原始狀態Facebook的照片瀏覽器不
• 在我的生產代碼，完整的URL將被改變，而不是添加/更改一個變量後在演示代碼所示

Answer 1

你必須使用歷史API，尤其你有那麼當用戶打開你可以做一些模態使用history.pushState()history API

：

history.pushState(stateObj, "page 2", "image\id.html"); 

其中：stateObj是您通過歷史記錄傳遞的對象，第2頁是標題，最後一個參數是您要修改的URL。

完成之後，您必須使用popstate event，因爲瀏覽器「後退」和「前進」按鈕不會重新加載頁面。