我在Chrome上遇到了重复标签的问题(会话的内容),我希望避免重复选项卡的操作我打开的是一个弹出窗口,没有地址栏,没有状态栏,什么都没有,只有一个窗口。没有办法复制一个标签页(作为弹出窗口打开)在IE和Firefox中(至少我还没有找到一个),但在Chrome中仍然是可能的。
I also know I'm not able to programmatically check if there's an already open duplicated tab
你知道该怎么做吗?
谢谢!
我在Chrome上遇到了重复标签的问题(会话的内容),我希望避免重复选项卡的操作我打开的是一个弹出窗口,没有地址栏,没有状态栏,什么都没有,只有一个窗口。没有办法复制一个标签页(作为弹出窗口打开)在IE和Firefox中(至少我还没有找到一个),但在Chrome中仍然是可能的。
I also know I'm not able to programmatically check if there's an already open duplicated tab
你知道该怎么做吗?
谢谢!
6条答案
按热度按时间bogh5gae1#
目的
只是澄清一下:目标是检测(并关闭)通过Chrome的“复制”右键单击菜单选项打开的标签。
首次尝试
“Duplicate tab”操作的工作方式与用户单击“Back”然后单击“Forward”后重新加载页面时的工作方式几乎完全相同,因此您基本上实现了this question的一个版本:
这很好,但是你 * 只 * 想在你“复制标签页”时检测。要做到这一点,我们可以清空
onbeforeunload
中的状态。这是因为onbeforeunload
只在用户点击“后退”或“前进”时被调用,而不是在复制标签页时被调用。第二次尝试
twh00eeo2#
我的应用程序要求用户只能登录一次,这样我就可以使用localStorage来可靠地缓存记录。登录使用localStorage标志来强制执行此要求,并使用window.name来了解哪个用户拥有该选项卡。
问题是浏览器的复制选项卡工具搞砸了执行。下面的代码强制一个登录页面出现在复制的选项卡中,如果他们复制了一个登录会话。
这个解决方案已经在Chrome浏览器中测试过了。它利用了一个重复的标签页没有名称的事实。这个特性可能并不存在于所有的浏览器中。
preventDuplicateTab函数在页面加载序列中很早就被调用。
p4rjhz4m3#
在
onLoad
函数中,我使用了window.performance.getEntriesByType("navigation")[0]).type
来检查浏览器中的重复标签。如果值类型为
back_forward
,则该值为重复选项卡我为谁分忧。
46qrfjad4#
如果您想避免出现多个选项卡(重复或不重复),您可以使用此处的可接受答案和此问题的解决方案之一的组合:https://stackoverflow.com/a/11008432/1257546
我知道我的解决方案,与本地和会话存储,为我工作:-)
如果您必须在多个浏览器中检测会话,则需要服务器端解决方案。
ev7lccsx5#
我遇到了同样的问题,并为此用例创建了一个npm包。
它确实涵盖了大多数浏览器和用例。
https://www.npmjs.com/package/is-tab-duplicated
zzzyeukh6#
很高兴看到这个问题现在已经有了答案。我也面临着这个问题,我用下面的方法解决了它,但有一个问题。
我依赖于Session Storage作为基于标签的存储,在这里我存储了一个唯一ID。每次页面初始化时,我们使用Broadcast Channel询问其他标签是否具有相同的uniqueID。如果它们具有相同的uniqueID,我们只需为新标签刷新唯一ID。
您可以在Repository Readme -https://github.com/haricane8133/unique-tabid中找到更多详细信息
我发布的NPM包位于https://www.npmjs.com/package/unique-tabid,如何在React应用程序中使用此包的示例位于https://github.com/haricane8133/unique-tabid-client。