如何修改Facebook的照片查看器的历史记录？

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

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

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

1. 点击此链接
2. 点击Photos
3. 点击页面上的照片
4. 单击向右或向左箭头（或使用键盘箭头键）更改iamges
5. a）单击浏览器中的后退和前进历史记录按钮
6. b）单击照片查看器

我试图创建一个JSFiddle来显示我在这里的位置，但JSFiddle显然不允许操纵历史记录。 因此，我已将我的代码放在这里 ， 您可以从这里下载 。

---

几个关键点：

• 首先查看索引页面，然后使用该链接转到测试页面
• 当模态关闭时，按后退按钮不应重新打开模态，而是应该返回索引页面。
• 关闭模式后，按下前进按钮应该重新打开模式，因为Facebook的照片查看器确实处于原始状态
• 在我的生产代码中，将更改完整的URL，而不是在URL中添加/更改变量，如演示代码中所示

Answer 1

您必须使用历史API，特别是您必须使用history.pushState() 历史记录API

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

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

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

完成后，您必须使用popstate事件，因为浏览器后退和前进按钮不会重新加载页面。