Любой способ определить вкладку браузера в JavaScript?

Мне нужно определить, на какой вкладке я вхожу в браузер. Нет ли какой-либо информации, которую я могу получить в браузере, чтобы определить вкладку? Мне не нужно ничего знать о каких-либо других вкладках, мне просто нужен идентификатор для вкладки, в которой я нахожусь. Это может быть случайный или упорядоченный номер или штамп даты-времени, если он остается тем же самым для жизнь вкладки.

У меня есть приложение на стороне клиента, которое делает соединение BOSH через HTTP с удаленным сервером, и если я открываю его на нескольких вкладках, каждый экземпляр нуждается в его собственном уникальном идентификаторе или приложение терпит неудачу, поэтому мне просто нужен уникальный номер, который связан с вкладкой до тех пор, пока существует табуляция (то есть что-то, что переживает обновление страницы при навигации по сайту, который предоставляет это приложение). Похоже, что это просто проблема, которая должна быть доступна в браузере, например window.tabId - все, что мне нужно. У меня есть серьезный блок разработки, потому что я не могу пройти мимо этого простого, простого и простого решения, которое, похоже, не существует. Должен быть способ (в этом кроссбраузерное решение).

Любые идеи?

Ответы

Ответ 1

SessionStorage - за вкладку/окно, поэтому вы можете определить случайное число в sessionStorage и сначала получить его, если существует:

var tabID = sessionStorage.tabID ? sessionStorage.tabID : sessionStorage.tabID = Math.random();

UPDATE:
В некоторых случаях вы можете иметь один и тот же sessionStorage на нескольких вкладках (например, при дублировании вкладки). В этом случае следующий код может помочь:

var tabID = sessionStorage.tabID && sessionStorage.closedLastTab !== '2' ? sessionStorage.tabID : sessionStorage.tabID = Math.random();
sessionStorage.closedLastTab = '2';
$(window).on('unload beforeunload', function() {
      sessionStorage.closedLastTab = '1';
});

Ответ 2

Вы должны использовать html5, но sessionStorage в сочетании со случайным ориентиром, похоже, будет тем, что вы хотите.

Ответ 3

Вы не можете получить идентификатор вкладки с javascript, как всегда есть какое-то решение, которое может помочь вам с использованием разных сеансов/файлов cookie, когда пользователь открывает новую вкладку.

Некоторая ссылка:

Получить вкладку вкладки браузера Index/Id

получить URL-адреса вкладок firefox из расширения firefox

Как отличать сеансы на вкладках браузера?

Получите уникальный сеанс на каждой вкладке браузера

asp.net - session - несколько вкладок браузера - разные сеансы?

Ответ 4

Поскольку у меня нет простой функции Javascript, такой как windows.currentTabIndex, я написал несколько строк Javascript, чтобы зафиксировать идентификатор на каждой вкладке браузера при их загрузке.

function defineTabID()
    {
    var iPageTabID = sessionStorage.getItem("tabID");
      // if it is the first time that this page is loaded
    if (iPageTabID == null)
        {
        var iLocalTabID = localStorage.getItem("tabID");
          // if tabID is not yet defined in localStorage it is initialized to 1
          // else tabId counter is increment by 1
        var iPageTabID = (iLocalTabID == null) ? 1 : Number(iLocalTabID) + 1;
          // new computed value are saved in localStorage and in sessionStorage
        localStorage.setItem("tabID",iPageTabID);
        sessionStorage.setItem("tabID",iPageTabID);
        }
    }

Этот код сохраняет индекс последней вкладки в localStorage чтобы обновить текущее значение для новых вкладок, и в sessionStorage чтобы исправить идентификатор страницы!

Я должен вызвать defineTabId() на каждой странице моего приложения. Поскольку я разрабатываю с использованием шаблонов JSF, это определяется только в одном месте :-)

Ответ 5

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

Я нашел еще одно возможное решение: using sessionStorage. Он поддерживается FF3.5 +, Chrome4 +, Safari4 +, Opera10.5 + и IE8 +.

Ответ 6

Если нет шансов, что пользователь откроет 3 вкладки в течение 2 миллисекунд, можно использовать временную метку и сохранить ее в window.name и использовать это как ключ в вашем поиске. Значение window.name останется с вкладкой до ее закрытия.

Timestamp

Ответ 7

Для тех, кто использует React, я сделал маленький хитрый крючок:

import {useEffect, useMemo} from 'react'
import uniqid from 'uniqid'

export const TAB_ID_KEY = 'tabId'

export default () => {
  const id = useMemo(uniqid, [])

  useEffect(() => {
    if (typeof Storage !== 'undefined') {
      sessionStorage.setItem(TAB_ID_KEY, id)
    }
  }, [id])

  return id
}

Поместите это в свой базовый компонент App/Page, или где-нибудь, что, как вы знаете, всегда будет монтироваться.

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

Дублирование вкладки даст вам новый идентификатор для новой вкладки, поскольку компонент будет снова подключен, и эффект запустится, перезаписав предыдущий идентификатор вкладки.

Ответ 8

По крайней мере, для chrome, существует официальный ответ с 2013 года: chrome.tabs API.