Как узнать, открыта ли вкладка браузера с помощью Javascript?

Как узнать или проверить, открыты ли две вкладки браузера и открываются ли эти вкладки, пользователь получит окно оповещения или поле msg, в котором говорится, что "URL уже открыт", что-то вроде этого, в чистом/родной JavaScript? Эта вкладка браузера содержит внешний веб-сайт, у которого нет никаких прав на его манипулирование или изменение. Благодаря

Примеры URL

yahoo.com and google.com

Я хочу предупредить пользователя, если уже открыта вкладка для yahoo.com и google.com

И я хочу использовать tabCreate, чтобы открыть url вот так:

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

Ответ 1

Вы можете использовать что-то вроде следующего

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

и удалите ссылку random из следующей строки

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

Боковое примечание. Как вы можете видеть выше, мы создали два окна с третьим содержимым; вы должны знать, что нет способа получить какую-либо ссылку (к родительскому/открывающему окну) из них.

Ответ 2

Одна основная идея заключается в том, чтобы хранить счетчик вкладок в 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;
};

Попробуйте открыть эту скрипту на нескольких вкладках.

Обратите внимание, что этот метод довольно хрупкий. Например, если по какой-то причине браузер выйдет из строя, обработчик выгрузки не будет запущен, и он выйдет из строя.

Ответ 3

Ответ Кейси Чу работает нормально, пока браузер не завершится с открытой страницей. При любом следующем выполнении объект localStorage будет инициализирован tabCount с ненулевым значением. Поэтому лучшим решением является сохранение значения в 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);
};