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

时间:2016-10-19 14:08:52

标签: javascript jquery ajax intercom.js

我拥有:当从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,但它无法正常工作。出于某种原因,intercom.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的变量“counter”都会递增。这意味着如果我期望两个标签的标题中的“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();

2 个答案:

答案 0 :(得分:0)

我在您的代码中不理解的部分是您打开新浏览器选项卡的位置。但是,如果发生在某个地方并且您想要将新标签的标题设置为其开头,您可以这样做:

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

答案 1 :(得分:0)

你正在使用某种长期投票吗? 也许您可以将这些轮询调用与浏览器的时间同步。 例如每当浏览器的时间秒数为偶数时轮询。那么每个标签应该同时发送它的请求并且(几乎)同时获得更新标题的答案