我有一个web应用程序,它存储有关最近访问的页面的信息,我们称之为a。当用户访问另一种类型的页面时,称为B,我会在顶部呈现一个菜单,其中有一个按钮指向最近访问的a页面。B页可以通过A页或B页访问,用户可以将其视为A.的属性
这很好,但当有人打开两个选项卡,并且在选项卡1中的B页上有指向a页A1的链接时,他们会打开一个新选项卡并访问a页A2,这就成了一个问题。当用户刷新选项卡1中的B页时,菜单变为A2。我希望能够识别正在使用的选项卡,这样我就可以为选项卡1保存A1,这样它就不会变为A2。
使用一个选项卡时:
A1 -> B1 -> B2 (the menu points back to A1)
使用两个选项卡时:
Time | T1 | T2 | T3
----------------+----------+----------+-------------
Tab 1: | A1 -> B1 | | [refresh B1]
Tab 2: | | A2 -> B3 |
----------------+----------+----------+-------------
Menu points to: | A1 A1 | A2 A2 | A2
当用户回到选项卡1时,这会混淆他们在选项卡2(A2)而不是A1中查看的用户。
恐怕无法获取浏览器选项卡ID,但有人可能有什么解决办法?
HTML5会话存储解决了这个问题:
站点可以将数据添加到会话存储中,在该窗口中打开的同一站点的任何页面都可以访问该数据。
所有现代浏览器都支持它
另一种方法是使用window.name
属性。它是特定于选项卡/窗口的,在浏览器导航时将保持不变。因此,您可以在window.name
属性中存储一些标签id之王
编辑:时间的流逝使我2012年的原始答案不正确。正如bedrin所指出的,您现在可以使用Window.sessionStorage
对象:
sessionStorage属性允许您访问当前来源的会话存储对象。sessionStorage类似于Window.localStorage,唯一的区别是,虽然存储在localStorage中的数据没有过期设置,但存储在sessionStorage中的信息在页面会话结束时会被清除。只要浏览器处于打开状态,页面会话就会持续,并在页面重新加载和恢复期间继续存在。在新选项卡或窗口中打开页面将启动新会话,这与会话cookie的工作方式不同。
原始答案(2012):
我担心这不可能以可移植的方式实现,因为你自己已经发现,不可能检索到像浏览器选项卡ID这样的东西。据我所知,HTML标准完全不知道浏览器中的选项卡。
我能想到的唯一解决办法是:在应用程序中实现和管理选项卡。我见过几个这样做的商业web应用程序,但(imho)用户体验相当糟糕。
所以我做了一个解决方案,看起来效果很好没有问题。请参阅最后一个问题项目符号。我仍然希望有更好的想法,所以如果你成功了,请告诉我!
无论如何;以下是我的做法。请记住,这不是一个100%防傻的解决方案,如果用户"行为不端"并同时刷新多个选项卡,它可能会混淆:
base.html(所有页面都继承)({{A}}从Django中呈现一个变量):
// This is executed right before leaving the page
window.onunload = function() {
if( '{{ A }}' != null )
var prev_A = '{{ A }}';
else if (typeof previous_A != 'undefined') {
var prev_A = previous_A;
else
var prev_A = '';
localStorage.setItem('a', prev_A);
};
// Remove the local storage as soon as you get to this page
localStorage.removeItem('a');
B_base.html(所有B的基本模板。B_base.html也继承了base.html。我把这个代码放在base.html中的代码之前执行)
var previous_A = localStorage.getItem('a');
因此,基本上我得到的是,每个页面在离开页面时都会设置localStorage"a",并在进入页面时立即删除localStorage"a",但B页面除外,它们在删除之前先将"a"保存为本地变量。
问题:
- 同时打开多个选项卡中的链接将覆盖此变量,并且一个选项卡将没有previous_A
- 关闭一个A选项卡而不去任何地方,然后直接打开一个新的B页,将导致B选项卡在其previous_A中具有关闭的A值
- 从A页打开新选项卡中的B链接不会返回链接。。。这是交易破坏者