如何像Facebook的照片查看器一样修改历史记录? [英] How to modify history as facebook's photo viewer does?

问题描述

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

I have a popup modal on my website similar to facebook's photo viewer. When the modal is opened, it is displaying content from another page and I want to change the address bar value and history to show this.

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

There is a dropdown in the modal that changes the content in the modal to that of a different page. When this happens, I once again want to change the address bar value and history to show the page was changed.

本质上，我想精确复制Facebook照片查看器的行为，您可以通过以下方式进行尝试:

Essentially, I want to exactly replicate the behavior of facebook's photo viewer, which you can try out by:

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

1. Clicking on this link
2. Clicking on Photos
3. Clicking on a photo on the page
4. Click the right or left arrows (or use your keyboard arrow keys) to change iamges
5. a) click the back and forward history buttons in your browser
6. b) click out of the photo viewer

我试图创建一个JSFiddle来显示我的工作状况，但是JSFiddle显然不允许操纵历史记录.因此，我将我的代码放在此处，并且将

I tried to create a JSFiddle to show where I am at with this, but JSFiddle apparently does not allow the history to be manipulated. As such, I've put my code online here, and which you can download from here.

一些要点:

• 首先查看索引页面，然后使用链接转到测试页面
• 关闭模态后，按返回按钮应该不重新打开模态，而是应带您回到索引页面.
• 关闭模态后，按前进按钮应像Facebook的照片查看器一样，以其原始状态重新打开模态
• 在我的生产代码中，将更改完整的URL，而不是像演示代码中所示在URL中添加/更改变量

• Start by viewing the index page, then use the link to go to the test page
• When the modal is closed, pressing the back button should not reopen the modal, but instead should take you back to the index page.
• After closing the modal, pressing the forward button should reopen the modal in it's original state as facebook's photo viewer does
• In my production code, the full URL will be changed instead of adding/changing a variable in the URL as shown in the demo code

推荐答案

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

You have to use history API, and specifically you have to use history.pushState() history API

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

So when a user opens the modal you can do something :

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

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

Where : stateObj is the object that you pass through history, page 2 is the title and the last parameter is the URL you want to modify.

完成此操作后，您必须在 popstate事件上使用，因为浏览器的后退"和前进"按钮将不会重新加载页面.

After you've done so you have to use on popstate event as the browser Back and Forward buttons won't reload the page.

这篇关于如何像Facebook的照片查看器一样修改历史记录?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！