web-dev-qa-db-ja.com

JavaScriptでブラウザタブを識別する方法はありますか？

ブラウザ内のどのタブにいるかを識別できるようにする必要があります。タブを識別するためにブラウザから取得できる情報は少しありませんか？他のタブについて何も知る必要はありません。現在のタブのIDが必要です。それは、同じ番号のままであれば、ランダムな番号またはシーケンス番号、または日時スタンプです。タブの寿命。

リモートサーバーへのHTTP接続を介してBOSHを作成するクライアント側アプリがあり、複数のタブで開く場合、各インスタンスに固有のIDが必要であるか、アプリが失敗するため、関連付けられている一意の番号が必要ですそのタブが存在する限り、そのタブ（つまり、このアプリを提供するサイトをナビゲートするときにページの更新に耐えられるもの）。 window.tabIdのように、ブラウザでただ利用可能になるはずの簡単なように思えます-それは私が必要とするすべてです。存在しないように見えるこのシンプルでシンプルなシンプルなソリューションをすり抜けることができないので、深刻な開発ブロックがあります。方法がなければなりません（クロスブラウザーソリューション）。

何か案は？

javascriptbrowsertabsuniqueidentifier
34
user1588877

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';
});
31
Mohamad Rostami

Html5を使用する必要がありますが、 sessionStorage ランダムなGUIDと組み合わせることで、必要なように見えます。

11
jmoreno

_windows.currentTabIndex_のような単純なJavascript関数が見つからないため、各ブラウザーのタブが読み込まれたときにIDを修正するための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に保存してページのIDを修正します！

アプリケーションの各ページでdefineTabId()関数を呼び出す必要があります。 JSFテンプレートを使用して開発しているため、これは1か所でのみ定義されています:-)

5
schlebe

JavaScriptでタブIDを取得することはできません。ユーザーが新しいタブを開いたときに別のセッション/ Cookieを使用するなどの手助けをするソリューションがあります。

いくつかの参照：

ブラウザタブインデックス/ IDの取得

Firefox拡張機能からFirefoxタブのURLを取得

ブラウザタブのセッションをどのように変えるか

各ブラウザタブで一意のセッションを取得

asp.net-セッション-複数のブラウザータブ-異なるセッション？

5
Trinh Hoang Nhu

可能な解決策の1つは「window.name」プロパティを使用することですが、他の誰かが使用できるため、使用したくありません。

もう1つの解決策が見つかりました。sessionStorageを使用します。 FF3.5 +、Chrome4 +、Safari4 +、Opera10.5 +、およびIE8 +でサポートされていました。

2
DioNNiS

ユーザーが2ミリ秒以内に3つのタブを開く可能性がない場合、タイムスタンプを使用してそれをwindow.nameに保存し、ルックアップのキーとして使用できます。 window.nameの値は、閉じられるまでタブにとどまります。

タイムスタンプ

1
eaglei22

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コンポーネント、または常にマウントされることがわかっている場所に配置します。

マウント後に効果を実行し、セッションストレージの現在のタブに一意のIDを設定します。セッションストレージはタブ固有のストレージです。

タブを複製すると、コンポーネントが再びマウントされてエフェクトが実行され、前のタブのIDが上書きされるため、新しいタブの新しいIDが取得されます

0
Matt Wills