浏览器选项卡之间的通信:所有浏览器选项卡的页面标题必须同步更新

Communication between browser tabs: page titles must be updated synchronously for all browser tabs

本文关键字:浏览器 选项 标题 同步 更新 之间 通信      更新时间:2023-09-26

我有什么:页面标题是动态更新时,新的数据是从ajax调用检索;如果访问此页的选项卡-标题设置为默认值;如果我打开这个页面的第二个选项卡,这个选项卡的标题被设置为默认(我必须修复这个)

我需要什么:页面标题必须与此页面的所有选项卡相同。我的意思是,页面标题必须同步更新所有选项卡。

我当前的实现:

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,但它不能正常工作。出于某种原因,对讲机。On每次获取不同的数据。例如:第一次调用-默认标题,第二次调用-动态标题。我检查了调试,错误的数据出现在执行这行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递增每次我打开新的选项卡。这意味着如果我期望在title中有两个制表符为"3",我得到的是两个制表符为"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();

我在你的代码中不理解的部分是你打开一个新的浏览器选项卡。但是,如果你想把新标签的标题设置为它的开头你可以这样做:

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

您是否使用某种长轮询?也许您可以将这些轮询调用与浏览器的时间同步。例如,每次浏览器的时间秒数为偶数时进行轮询。然后每个TAB应该同时发送请求并(几乎)同时获得更新标题

的答案