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

如何知道或检查两个浏览器选项卡是否已经打开，如果这些选项卡已经打开，用户将收到一个警告框或消息框，用纯/本地JavaScript显示"url已经打开"之类的信息？这个浏览器选项卡包含一个外部网站，我没有任何权限操作或更改它。谢谢

示例URL

yahoo.com and google.com

如果雅虎和谷歌的已经打开了标签，我想提醒用户

我想用tabCreate打开这样的url：

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

您可以使用以下

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

工作jsBin |关于window.open方法的更多信息

如果你想控制多个窗口，请使用下面的代码段

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

工作jsBin

如果你不想让它们在单独的窗口中加载，只需排除这行

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

并从下一行中删除CCD_ 1参考

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

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

一个基本想法是将选项卡计数存储在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;
};

试着在多个选项卡中打开这个小提琴。

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

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

这个答案：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.
}

我只想把它扔到这里，因为我希望我有这样的东西。随你怎么做。

如果你想要一个解决方案来检查你是否是不需要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);
}

enter code here// Check if the 'tabs' session cookie exists
    if (!Cookies.get('tabs')) {
        Cookies.set('tabs', 0, { expires: 0 }); // Expires when the browser is closed
    }
    // Check if the session cookie exists and its value
    if (+Cookies.get('tabs') > 0) {
        `enter code here`alert('Already open!');
    } else {
        Cookies.set('tabs', 0, { expires: 1 }); // Expires after one day (adjust as needed)
    }
    // Increment the 'tabs' cookie value when opening a new tab
    Cookies.set('tabs', +Cookies.get('tabs') + 1);
    // Decrement the 'tabs' cookie value when closing a tab
    window.onunload = function () {
        Cookies.set('tabs', +Cookies.get('tabs') - 1);
    };
    // Decrement the 'tabs' cookie value when the tab is being closed
    window.addEventListener('beforeunload', function () {
        Cookies.set('tabs', +Cookies.get('tabs') - 1);
    });

相关内容

最新更新

热门标签：