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

Question

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

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

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

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

我尝试创建一个JSFiddle来显示我在这里的位置，但JSFiddle显然不允许操纵历史记录。因此，我提出了my code online here，以及you can download from here。

---

几个关键点：

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

Answer 1

您必须使用历史记录API，具体而言您必须使用history.pushState() history API

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

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

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

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