我的网站上有一个弹出模式,类似于 Facebook 的照片查看器。当模式打开时,它显示来自另一个页面的内容,我想更改地址栏值和历史记录以显示这一点。
模式中有一个下拉菜单,可以将模式中的内容更改为不同页面的内容。当发生这种情况时,我再次想要更改地址栏值和历史记录以显示页面已更改。
本质上,我想完全复制 Facebook 照片查看器的行为,您可以通过以下方式尝试:
- 点击此链接 https://www.facebook.com/officialstackoverflow/timeline
- 点击
Photos
- 单击页面上的照片
- 单击向右或向左箭头(或使用键盘箭头键)更改图像
- a) 单击浏览器中的后退和前进历史记录按钮
- b) 单击照片查看器之外的按钮
我尝试创建一个 JSFiddle 来显示我的情况,但 JSFiddle 显然不允许操纵历史记录。因此,我已经把我的在线代码在这里 http://www.pricewombat.com/history/,以及哪个你可以从这里下载 http://www.pricewombat.com/history.zip.
几个关键点:
- 首先查看索引页面,然后使用链接转到测试页面
- 当模式关闭时,按后退按钮应该not重新打开模式,但应该带您返回索引页面。
- 关闭模式后,按前进按钮应以原始状态打开模式,就像 Facebook 的照片查看器一样
- 在我的生产代码中,将更改完整的 URL,而不是如演示代码中所示添加/更改 URL 中的变量
你必须使用历史API,特别是你必须使用history.pushState()
历史API https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
因此,当用户打开模式时,您可以执行以下操作:
history.pushState(stateObj, "page 2", "image\id.html");
其中:stateObj是你通过历史记录传递的对象,第2页是标题,最后一个参数是你要修改的URL。
完成后你必须使用弹出状态事件 https://developer.mozilla.org/en-US/docs/Web/Events/popstate因为浏览器的后退和前进按钮不会重新加载页面。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)