如何知道浏览器选项卡是否已经使用 Javascript 打开？

Question

如何知道或检查两个浏览器选项卡是否已打开，如果这些选项卡已打开，用户将收到一个警告框或消息框，提示“网址已打开”，类似这样的纯/原生 JavaScript？此浏览器选项卡包含一个外部网站，我没有任何权限来操作或更改它。谢谢

示例网址

yahoo.com and google.com

如果 yahoo.com 和 google.com 已经打开标签页，我想提醒用户

我想使用 tabCreate 像这样打开网址：

tabCreate("http://maps.google.com/", "tabMapsPermanentAddress");
mean to open a new tab, it is use in creating chrome extension

Answer 1

只是要把它扔在这里，因为我希望我有类似的东西。随心所欲。

如果你想要一个解决方案来检查你是否是不需要 cookie 的活动选项卡，作为 React 钩子工作，并且无论浏览器是否崩溃都可以工作，你可以使用这个 useIsActiveTab webhook，它返回 true如果您是最近的活动选项卡/窗口。您还可以使用activateTab 将自己设置为活动标签。

import { useEffect, useState } from 'react';

const CHARACTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
const CHARACTERS_LENGTH = CHARACTERS.length;

function generateTabId() {
  let result = '';
  const prefix = 'TAB_';
  const length = 15;
  for (let i = 0; i < length - prefix.length; i++) {
    result += CHARACTERS.charAt(Math.floor(Math.random() * CHARACTERS_LENGTH));
  }
  if (prefix.includes('_')) {
    return `${prefix}${result}`;
  }
  return `${prefix}_${result}`;
};

const tabId = generateTabId();

export function activateTab(): void {
  localStorage.setItem('activeTab', tabId);
  const event = new Event('thisStorage');
  window.dispatchEvent(event);
}

export function useIsActiveTab(): boolean {
  const [isActiveTab, setIsActiveTab] = useState(false);
  useEffect(() => {
    setActiveTab();
    function updateIsActiveTab() {
      setIsActiveTab(checkIfActiveTab());
    }
    window.addEventListener('storage', updateIsActiveTab);
    window.addEventListener('thisStorage', updateIsActiveTab);
    updateIsActiveTab();
    return () => {
      window.removeEventListener('storage', updateIsActiveTab);
      window.removeEventListener('thisStorage', updateIsActiveTab);
    };
  }, []);
  return isActiveTab;
}

function checkIfActiveTab(): boolean {
  const activeTab = localStorage.getItem('activeTab');
  if (!activeTab) {
    console.error('localStorage.activeTab is not set');
    return true;
  }
  if (activeTab === tabId) {
    return true;
  }
  return false;
}

function setActiveTab(): void {
  localStorage.setItem('activeTab', tabId);
}

Answer 2

这个答案：https://stackoverflow.com/a/28230846 是不需要 Cookies/js-cookie 库的替代方案。它更适合我的需要。简而言之（有关完整说明，请参阅链接答案）：

$(window).on('storage', message_receive);

...

// use local storage for messaging. Set message in local storage and clear it right away
// This is a safe way how to communicate with other tabs while not leaving any traces
//
function message_broadcast(message)
{
    localStorage.setItem('message',JSON.stringify(message));
    localStorage.removeItem('message');
}


// receive message
//
function message_receive(ev)
{
    if (ev.originalEvent.key!='message') return; // ignore other keys
    var message=JSON.parse(ev.originalEvent.newValue);
    if (!message) return; // ignore empty msg or msg reset

    // here you act on messages.
    // you can send objects like { 'command': 'doit', 'data': 'abcd' }
    if (message.command == 'doit') alert(message.data);

    // etc.
}

Answer 3

answer by Casey Chu 工作正常，直到浏览器在页面打开时崩溃。在任何下一次执行中，localStorage 对象将使用非零值初始化 tabCount。因此，更好的解决方案是将值存储在会话 cookie 中。当浏览器成功退出时，会话 cookie 将被删除。当浏览器崩溃时，会话 cookie 实际上会被保留，但幸运的是仅用于浏览器的下一次执行。

对象 sessionStorage 对于每个选项卡都是不同的，因此它不能用于共享选项卡计数。

这是使用js-cookie 库的改进解决方案。

if (+Cookies.get('tabs') > 0)
    alert('Already open!');
else
    Cookies.set('tabs', 0);

Cookies.set('tabs', +Cookies.get('tabs') + 1);

window.onunload = function () {
        Cookies.set('tabs', +Cookies.get('tabs') - 1);
};

Answer 4

你可以使用类似下面的东西

<!-- HTML -->
<a id="opener">Open window</a>

// JavaScript
var a = document.getElementById('opener'), w;        
a.onclick = function() {
  if (!w || w.closed) {
    w = window.open("https://www.google.com","_blank","menubar = 0, scrollbars = 0");
  } else {
    console.log('window is already opened');
  }
  w.focus();
};

Working jsBin | More on window.open method

如果要控制多个窗口，使用下面的sn-p

<!-- HTML -->
<a href="https://www.google.com" class="opener">Open google.com</a> | 
<a href="http://www.yahoo.com" class="opener">Open yahoo.com</a> 

//JavaScript
window.onload = function(){
  var a = document.querySelectorAll('.opener'), w = [], url, random, i;
  for(i = 0; i < a.length; i++){
    (function(i){
      a[i].onclick = function(e) {
        if (!w[i] || w[i].closed) {
          url = this.href;
          random = Math.floor((Math.random() * 100) + 1); 
          w[i] = window.open(url, "_blank", random, "menubar = 0, scrollbars = 0");
        } else {
          console.log('window ' + url + ' is already opened');
        }
        e.preventDefault();
        w[i].focus();
      };
    })(i);
  }
};

Working jsBin

如果您不希望它们在单独的窗口中加载，只需排除此行

random = Math.floor((Math.random()*100)+1);

并从下一行删除random 引用

w[i] = window.open(url, "_blank", random, "menubar=0,scrollbars=0");

旁注：正如您在上面看到的，我们创建了两个包含一些第三方内容的窗口；你应该知道没有办法从他们那里获得任何参考（对父/打开器窗口）。

Answer 5

一个基本的想法是将标签计数存储在 cookie 或 localStorage 中，在页面加载时递增，在页面卸载时递减：

if (+localStorage.tabCount > 0)
    alert('Already open!');
else
    localStorage.tabCount = 0;

localStorage.tabCount = +localStorage.tabCount + 1;
window.onunload = function () {
    localStorage.tabCount = +localStorage.tabCount - 1;
};

在多个标签中尝试opening this fiddle。

但请注意，这种技术非常脆弱。例如，如果由于某种原因浏览器崩溃，卸载处理程序将不会运行，并且会不同步。