Question

我在Chrome上遇到重复的标签问题（会话的内容），我想避免重复标签的操作（或者没有关闭重复的标签）。我打开标签，因为它是一个弹出窗口，没有地址栏，没有状态栏，也没有任何东西，只有窗口。在IE和Firefox中没有办法复制一个标签（作为弹出窗口打开）（至少我没找到），但是在Chrome中仍然可以。

I also know I'm not able to programmatically check if there's an already open duplicated tab

知道如何处理这个问题吗？

谢谢！

Answer 1

<强>目标

只是为了澄清：目标是检测（并关闭）通过Chrome的“复制”右键菜单选项打开的标签。

首先尝试

“重复标签”操作几乎与用户点击“返回”然后“转发”后重新加载页面完全相同，因此您基本上实现了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.
    });
}

Answer 2

我的应用程序要求用户只能登录一次，以便我可以使用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);
  }
}

Answer 3

在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...');
}

Answer 4

如果您想要阻止多个标签（重复或不重复），您可以使用此处接受的答案的组合，以及此问题的解决方案之一： https://stackoverflow.com/a/11008432/1257546

我知道我的解决方案，包括本地和会话存储，对我有用： - ）

如果您必须在多个浏览器中检测会话，则需要服务器端解决方案。

如何在重复浏览器选项卡时实现

4 个答案: