jquery 浏览器页签被复制后如何实现

eblbsuwk  于 2022-11-03  发布在  jQuery
关注(0)|答案(6)|浏览(173)

我在Chrome上遇到了重复标签的问题(会话的内容),我希望避免重复选项卡的操作我打开的是一个弹出窗口,没有地址栏,没有状态栏,什么都没有,只有一个窗口。没有办法复制一个标签页(作为弹出窗口打开)在IE和Firefox中(至少我还没有找到一个),但在Chrome中仍然是可能的。
I also know I'm not able to programmatically check if there's an already open duplicated tab
你知道该怎么做吗?
谢谢!

bogh5gae

bogh5gae1#

目的

只是澄清一下:目标是检测(并关闭)通过Chrome的“复制”右键单击菜单选项打开的标签。

首次尝试

“Duplicate tab”操作的工作方式与用户单击“Back”然后单击“Forward”后重新加载页面时的工作方式几乎完全相同,因此您基本上实现了this question的一个版本:

function onLoad()
{
    if ($('#myStateInput').val() === '') // Load with no state.
        $('#myStateInput').val('already loaded'); // Set state
    else
        alert("Loaded with state. (Duplicate tab or Back + Forward)");
}

这很好,但是你 * 只 * 想在你“复制标签页”时检测。要做到这一点,我们可以清空onbeforeunload中的状态。这是因为onbeforeunload只在用户点击“后退”或“前进”时被调用,而不是在复制标签页时被调用。

第二次尝试

function onLoad()
{
    if ($('#myStateInput').val() === '') // Load with no state.
        $('#myStateInput').val('already loaded'); // Set state
    else
        alert("Duplicate tab! Do something.");

    $(window).on('beforeunload', function() // Back or Forward buttons
    {
        $('#myStateInput').val(''); // Blank the state out.
    });
}
twh00eeo

twh00eeo2#

我的应用程序要求用户只能登录一次,这样我就可以使用localStorage来可靠地缓存记录。登录使用localStorage标志来强制执行此要求,并使用window.name来了解哪个用户拥有该选项卡。
问题是浏览器的复制选项卡工具搞砸了执行。下面的代码强制一个登录页面出现在复制的选项卡中,如果他们复制了一个登录会话。
这个解决方案已经在Chrome浏览器中测试过了。它利用了一个重复的标签页没有名称的事实。这个特性可能并不存在于所有的浏览器中
preventDuplicateTab函数在页面加载序列中很早就被调用。

/* This prevents users from duplicating the tab.  If they do it
 * triggers the start page which checks for duplicate userid
 */
function preventDuplicateTab() {
  if (sessionStorage.createTS) { 
    // Chrome at least has a blank window.name and we can use this
    // signal this is a duplicated tab.
    console.log("Existing sessionStorage "+sessionStorage.createTS+" 
               w.name="+window.name);
    if (!window.name) {
      window.name = "*ukn*";
      sessionStorage.createTS = Date.now(); // treat as new
      window.location = "/res/Frame.htm?page=start.htm"; // force to 
                                                               signon screen
    }
  } else {
    sessionStorage.createTS = Date.now();
    console.log("Create sessionStorage "+sessionStorage.createTS+" 
                                    w.name="+window.name);
  }
}
p4rjhz4m

p4rjhz4m3#

onLoad函数中,我使用了window.performance.getEntriesByType("navigation")[0]).type来检查浏览器中的重复标签。
如果值类型为back_forward,则该值为重复选项卡
我为谁分忧。

var navigationType = (window.performance.getEntriesByType("navigation")[0]).type;
//back_forward value is duplicate tab
if(navigationType == 'back_forward'){
    alert('Can not concurrent edit dashboard...');
}
46qrfjad

46qrfjad4#

如果您想避免出现多个选项卡(重复或不重复),您可以使用此处的可接受答案和此问题的解决方案之一的组合:https://stackoverflow.com/a/11008432/1257546
我知道我的解决方案,与本地和会话存储,为我工作:-)
如果您必须在多个浏览器中检测会话,则需要服务器端解决方案。

ev7lccsx

ev7lccsx5#

我遇到了同样的问题,并为此用例创建了一个npm包。
它确实涵盖了大多数浏览器和用例。
https://www.npmjs.com/package/is-tab-duplicated

zzzyeukh

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

相关问题