Javascript 如何实现浏览器选项卡的复制

Javascript 如何实现浏览器选项卡的复制,javascript,jquery,tabs,cross-browser,duplicates,Javascript,Jquery,Tabs,Cross Browser,Duplicates,我在Chrome上有一个重复标签的问题(会话的东西),我想避免重复标签的行为(或者缺少关闭重复标签的功能)。我正在打开标签,因为它是一个弹出窗口,没有地址栏,没有状态栏,没有任何东西,只有窗口。在IE和Firefox(至少我还没有找到)中,没有办法复制一个标签(作为弹出窗口打开),但在chrome中仍然是可能的 你知道怎么做吗 谢谢 目标 澄清一下:目标是检测(并关闭)通过Chrome的“复制”右键单击菜单选项打开的选项卡 第一次尝试 function onLoad() { if ($

我在Chrome上有一个重复标签的问题(会话的东西),我想避免重复标签的行为(或者缺少关闭重复标签的功能)。我正在打开标签,因为它是一个弹出窗口,没有地址栏,没有状态栏,没有任何东西,只有窗口。在IE和Firefox(至少我还没有找到)中,没有办法复制一个标签(作为弹出窗口打开),但在chrome中仍然是可能的

你知道怎么做吗

谢谢

目标

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

第一次尝试

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.
    });
}
“复制选项卡”操作的工作原理与用户单击“后退”然后单击“前进”后重新加载页面时几乎完全相同,因此您基本上实现了以下版本:

这很好,但您只想在“复制选项卡”时进行检测。为此,我们可以在
onbeforeuload
中清空状态。这是因为只有在用户单击“后退”或“前进”时才会调用
onbeforeuload
,而在复制选项卡时不会调用

第二次尝试

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

我的应用程序要求用户只能登录一次,这样我就可以使用localStorage可靠地缓存记录。signon使用localStorage标志强制执行此要求,并使用window.name知道哪个用户拥有该选项卡

问题是浏览器的“复制”选项卡功能将强制执行搞砸了。如果复制了已登录会话,下面的代码将强制登录页显示在“复制”选项卡中

该溶液在铬中进行了测试。它利用了重复的选项卡没有名称这一事实并非所有浏览器中都存在此特性

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);
  }
}

如果要防止多个选项卡(重复或不重复),可以结合使用此处接受的答案和此问题的解决方案之一:

我知道我的带有本地和会话存储的解决方案适合我:-)


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

onLoad
函数中,我使用了
window.performance.getEntriesByType(“导航”)[0])。键入
在浏览器中检查重复选项卡

如果类型值为“后退”\u“前进”
,则该值为“重复”选项卡

我和你一样关心谁

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

嗨@JosiahDaniels,这似乎对Chrome很有效,但当我在IE10中测试它时,警报没有出现,你知道IE是否有解决方法吗?我会继续工作,如果我解决了,我会在这里回答,regards@maxivisIE复制按钮相当于复制url、打开新选项卡和粘贴。不保留任何表单数据。除了使用Cookie的非常丑陋的黑客之外,我看不到处理这个问题的好方法。JosiahDaniels说的是,复制并粘贴URL是真的。如果有人需要,我用Cookies解决了这个问题。你也可以用它来检测重复的标签。Firefox也不会将窗口名复制到新标签上。