javascript 如何实现浏览器标签被复制
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25922776/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to realize when a browser tab has been duplicated
提问by robert
I'm having problems with a duplicate tab on Chrome (session's stuff) and I'd like to avoid the action of duplicating tabs (or lacking that close the duplicate one). I'm opening the tab as it was a popup, with no address bar, no status bar, and no nothing, just the window. There's no way to duplicate a tab (opened as a popup) in IE and Firefox (at least I havent found one), but in chrome is still possible.
我在 Chrome 上的重复标签（会话的东西）上遇到了问题，我想避免重复标签的操作（或缺少关闭重复标签）。我正在打开选项卡，因为它是一个弹出窗口，没有地址栏，没有状态栏，什么也没有，只有窗口。没有办法在 IE 和 Firefox 中复制选项卡（作为弹出窗口打开）（至少我还没有找到），但在 chrome 中仍然是可能的。
I also know I'm not able to programmatically check if there's an already open duplicated tab
Any idea how to approach this?
知道如何解决这个问题吗？
thanks!
谢谢！
回答by JosiahDaniels
Goal
目标
Just to clarify: The goal is to is to detect (and close) a tab that has been opened via Chrome's "Duplicate" right-click menu option.
澄清一下：目标是检测（并关闭）通过 Chrome 的“复制”右键单击菜单选项打开的选项卡。
First try
第一次尝试
The "Duplicate tab" action works almost exactly like when reloading a page after the user has clicked "Back" then "Forward", so you are basically implementing a version of 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)");
}
Thats great and all, but you onlywant to detect when you "Duplicate tab". To do this we can blank out the state in onbeforeunload. This works because onbeforeunloadgets only called when the user clicks "Back" or "Forward" but not when duplicating a tab.
这就是伟大的，但是你只需要检测，当你“复制标签”。为此，我们可以清空 中的状态onbeforeunload。这是有效的，因为onbeforeunload仅在用户单击“后退”或“前进”时才被调用，而在复制选项卡时不会被调用。
Second try
第二次尝试
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.
});
}
回答by Steve Pritchard
My application required that a user can only sign on once so I can use the localStorage to reliably cache records. The signon uses localStorage flags to enforce this requirement and uses the window.name to know which user owns the tab.
我的应用程序要求用户只能登录一次，以便我可以使用 localStorage 来可靠地缓存记录。登录使用 localStorage 标志来强制执行此要求，并使用 window.name 来了解哪个用户拥有该选项卡。
The issue was that the browser duplicate tab facility messed up the enforcement. The code below forces a signon page to appear in the duplicated tab if they duplicate a signed on session.
问题是浏览器的重复选项卡功能搞砸了强制执行。如果下面的代码复制了已登录的会话，则它们会强制登录页面出现在复制的选项卡中。
This solution was tested in Chrome. It makes use of the fact that a duplicated tab has no name. This characteristic may not exist in all browsers.
此解决方案已在 Chrome 中进行了测试。它利用了重复选项卡没有名称的事实。 此特性可能并非在所有浏览器中都存在。
The preventDuplicateTab function is called very early in the page load sequence.
在页面加载序列的早期调用 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);
}
}
回答by timkellypa
If you want to prevent multiple tabs (duplicate or not), you could use a combination of the accepted answer here, and one of the solutions to this question: https://stackoverflow.com/a/11008432/1257546
如果您想防止多个选项卡（重复与否），您可以使用此处接受的答案的组合以及此问题的解决方案之一：https: //stackoverflow.com/a/11008432/1257546
I know that my solution, with local and session storage, works for me :-)
我知道我的解决方案，带有本地和会话存储，对我有用:-)
If you have to detect sessions in multiple browsers you would need a server side solution.
如果您必须在多个浏览器中检测会话，您将需要一个服务器端解决方案。
