ブラウザタブ間の通信：すべてのブラウザタブでページタイトルを同期して更新する必要があります

Question

私は次のものを持っています：新しいデータがajax呼び出しから取得されているときに、このページのタブが訪問された場合 - タイトルはデフォルト値に設定されます。このページで2番目のタブを開くと、このタブのタイトルがデフォルトに設定されます（私はこれを修正する必要があります）

必要なもの：ページタイトルはこのページのすべてのタブで同じでなければなりません。つまり、すべてのタブでページタイトルを同期して更新する必要があります。

私の現在の実装：

var prevData; 
var newRequestsCounter = 0 
var getRequests = function(){ 
      $.ajax({ 
       async: true, 
       type: "GET", 
       url: "/get_requests/", 
       success: function(data){ 
        // retrieve and parse data. i skip this part 
        // newRequestsCounter is updating here 
        var visible = vis(); 
        if (visible){ 
         newRequestsCounter = 0 
         document.title = 'Default title' 
        } else { 
        if (newRequestsCounter == 0) { 
         document.title = 'Default title' 
        } else { 
         document.title = 'Dynamic title' 
        } 
        } 

        setTimeout(getRequests, 2000) 
       } 
      }); 
}; 

私はintercom.jsてみましたが、それが正常に動作しません。何らかの理由で、intercom.onは毎回異なるデータを取得します。たとえば、最初の呼び出し - デフォルトのタイトル、2番目の呼び出し - 動的なタイトル。私はデバッグでチェックしたが、この行を実行した後に間違ったデータが来るsetTimeout（getRequests、2000）。

var intercom = Intercom.getInstance(); 

intercom.on('notice', function(data) { 
    document.title = data.title; 
}); 
var prevData; 
var newRequestsCounter = 0 
var getRequests = function(){ 
      $.ajax({ 
       async: true, 
       type: "GET", 
       url: "/get_requests/", 
       success: function(data){ 
        // retrieve and parse data. i skip this part 
        // newRequestsCounter is updating here 
        var visible = vis(); 
        if (visible){ 
         newRequestsCounter = 0 
         intercom.emit('notice', {title: 'Default title'}); 
        } else { 
        if (newRequestsCounter == 0) { 
         intercom.emit('notice', {title: 'Default title'}); 
        } else { 
         intercom.emit('notice', {title: 'Dynamic title'}); 
        } 
        } 

        setTimeout(getRequests, 2000) 
       } 
      }); 
}; 

通常、単一のajaxコールバックの範囲で必要な機能を達成できるかどうかはわかりません。私は次のコードを試しました。この場合、localStorageの変数 "counter"は、新しいタブを開くたびに増分されます。つまり、2つのタブのタイトルに「3」が表示されると、2つのタブで「6」が表示されます。

var intercom = Intercom.getInstance(); 

intercom.on('notice', function(data) { 
    document.title = data.title; 
}); 

if (localStorage.getItem("counter") === null){ 
    localStorage.setItem("counter", 0); 
} 
var getRequests = function(){ 
      $.ajax({ 
       async: true, 
       type: "GET", 
       url: "/get_requests/", 
       success: function(data){ 
        // skip part with retrieving and parsing data 

         var counter = localStorage.getItem("counter") 
         localStorage.setItem("counter", ++counter); 
        var visible = vis(); 
        if (visible){ 
         localStorage.setItem("counter", 0); 
         intercom.emit('notice', {title: 'Default'}); 
        } else { 
        if (localStorage.getItem("counter") == 0 || localStorage.getItem("counter") === null) { 
         intercom.emit('notice', {title: 'Default'}); 
        } else { 
         intercom.emit('notice', {title: '(' + localStorage.getItem("counter") + ') requests'}); 
        } 
        } 
        setTimeout(getRequests, 2000) 
       } 
      }); 
}; 
getRequests(); 

Answer 1

私があなたのコードで理解していない部分は、新しいブラウザタブを開いているところです。しかし、それはどこかで起こって、あなたがこれを行うことができ、その開口部としてその新しいタブのタイトルを設定したい場合：

var newTab = window.open('/page') 
newTab.title = 'New Title'; 

Answer 2

をあなたは長いポーリングのいくつかの種類を使用していますか？ これらのポーリングコールをブラウザの時刻と同期させることができます。例： ブラウザの時間秒が偶数であるたびに投票します。各タブは同時にリクエストを送信して、同時に（ほとんど）同時に更新する必要があります。