Javascript 如何将历史记录修改为facebook'；s的照片查看器有什么功能？

我的网站上有一个类似于facebook照片查看器的弹出模式。当模式打开时，它显示的是另一个页面的内容，我想更改地址栏的值和历史来显示它

模式中有一个下拉列表，可将模式中的内容更改为其他页面的内容。发生这种情况时，我再次希望更改地址栏值和历史记录，以显示页面已更改

本质上，我想完全复制facebook照片查看器的行为，您可以通过以下方式尝试：

点击照片

点击页面上的照片

单击右箭头或左箭头（或使用键盘箭头键）更改IAMGE

a） 单击浏览器中的后退和前进历史按钮

b） 从照片查看器中单击

我试图创建一个JSFiddle来显示我在这方面的情况，但是JSFiddle显然不允许操纵历史。因此，我已经提出了，以及

---

几个关键点：

• 首先查看索引页，然后使用链接转到测试页
• 当模式关闭时，按下后退按钮应而不是重新打开模式，而是应返回索引页
• 关闭模式后，按“前进”按钮应该会像facebook的照片查看器一样以原始状态重新打开模式
• 在我的产品代码中，将更改完整的URL，而不是在URL中添加/更改变量，如演示代码所示

---

您必须使用历史API，特别是必须使用

history.pushState（）

因此，当用户打开模式时，您可以执行以下操作：

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

其中：stateObj是通过历史记录传递的对象，第2页是标题，最后一个参数是要修改的URL

---

完成此操作后，您必须使用on，因为浏览器的后退和前进按钮将不会重新加载页面。

关于

replaceState

？您已经阅读了页面吗？你错过了吗？@Karl AndréGagnon也许我读得太快了，但在我看来，

popstate

是你捕捉到的事件，而不是你调用的从历史中删除项目的函数。@Nate没错，当历史发生变化时它会捕捉到。因此，在执行

.back（）

@Nate操作时，您可以使用此事件来防止重新加载页面。实际上，忘记我说过的一切，

window.history.back（）

如果您使用了

pushState

，则不应重新加载页面。你肯定在别的地方遇到了问题。在控制台中测试它。输入

window.history.pushState（{}，“第2页”，“bar.html”）

，url将更改，然后

window.history.back（）url将返回到当前url而不重新加载。是的，我尝试了各种历史记录功能，但似乎无法复制facebook的行为。我遇到的主要问题是，在关闭模式时，我希望“后退”按钮使浏览器返回到上一页，而不是重新打开模式，但我不知道如何执行此操作。请看我发布的演示以及facebook的行为+1尽管如此。@Nate当您关闭窗口时，不要像在历史记录上进行新插入一样执行pushState，请执行window.history.back（）并在打开模式窗口时签出。history.length应增加+1，而当您关闭窗口时，应减少-1，而不是继续增加。这回答了一半的问题。关闭模式照片查看器时，所有按下的状态都将被删除。他们是怎么做到的？@vsync只需调用window.history.back（）；这将刷新页面。它们执行类似于
window.history.go（-N）
的操作，但从未刷新过。这是个谜。