提问人：Hung Anh Nguyen 提问时间：11/6/2023 最后编辑：Hung Anh Nguyen 更新时间：11/8/2023 访问量：72
如何检查选项卡之间的通信（复制、刷新选项卡） - Angular
How to check communication between tabs (duplicate, refresh tab) - Angular
问：
目前，我正在为学生进行在线测试。我很难检查学生是复制当前选项卡还是刷新当前选项卡。
因为如果学生在同一浏览器上复制 10 个相同的考试标签，服务器将过载。
目前，每个选项卡都有一个 url，当复制时，它将具有相同的 url，所以我想管理选项卡之间的差异，每个选项卡都会有一个唯一的点来区分它，例如在创建新选项卡时，它将创建一个 Id。
我尝试使用跨选项卡，但它不适用于我的项目。我需要所有人的帮助
答：
0赞
luk321
11/8/2023
#1
解决此问题的一种方法是使用 。您可以存储一个数字，该数字在用户打开您的页面时增加，在重新加载/关闭时减少。通过这种方式，您可以跟踪用户打开了您网站的选项卡数量。localstorage
在您的 s 或 ：AppComponentonInitconstructor
const tabsOpened = localStorage.getItem('tabsOpen');
console.log('tabs opened', tabsOpened); // here you can see how many tabs are opened currently
// -> Take some action here. To prevent more server requests
if(tabsOpened == null) {
localStorage.setItem('tabsOpen', '1');
} else {
localStorage.setItem('tabsOpen', (parseInt(tabsOpened) + 1).toString());
}
// This will decrease your counter on tabs closed or reload
window.onunload = () => {
const tabsOpened = localStorage.getItem('tabsOpen');
if(tabsOpened != null) {
localStorage.setItem('tabsOpen', (parseInt(tabsOpened) - 1).toString());
}
}
您可以在错误发生时重定向到错误页面，或执行其他操作。
请自行测试此代码，并确保您的用户有办法绕过任何错误。
请记住：您的 angular 应用程序最初仍然需要从您的服务器加载。因此，每当您打开新选项卡时，都会有一些服务器负载。不过，例如，您可以阻止新选项卡进行更多服务器调用。
评论
0赞
Hung Anh Nguyen
11/8/2023
非常感谢，但这不是最好的解决方案，因为当我复制具有相同 url 的选项卡时，变量 tabsOpen 将被覆盖，因此您仍然无法区分两个选项卡（，我希望每个选项卡都有所不同，以便能够将其区分为 id，因为我会将 id 发送到服务器， 以检查选项卡是否具有相同的会话但具有不同的 ID。
0赞
luk321
11/9/2023
首次读取后，您可以将此数字保存在服务中以保持其恒定。有了这个，您可以区分使用的选项卡。openTabsid
下一个：跟踪会话超时的“选项卡”
评论