javascript - 当我的用户收到他们朋友的未读消息时，如何切换我的网站标题？

Question

就像在 Facebook 中一样，当我们与某人聊天时，当我们在另一个选项卡中浏览另一个站点时，Facebook 选项卡的标题会切换，一旦它是“Facebook”，那么它就是“Rehan 向你发送消息”。我如何实现这一目标？

document.title = 'Rehan messaged you';

上面的 javascript 代码将更改我网站的标题。但是如何使它与原始标题（即我的网站“MySite.Com”的名称）切换？

Answer 1

您可以使用以下setInterval功能来做到这一点：

var cont = 0;
setInterval(function () {
    if (cont % 2) {
        var myText = 'Text 1';
    } else {
        var myText = 'Another text';
    }
    document.title = myText;

    cont++;
},1000);

http://jsfiddle.net/7bMjN/

我使用了 jQuery，但它不是必需的。

Answer 2

这是一个相对强大的解决方案，您可以在其中添加/删除任意数量的消息，每条消息都将被迭代，同时以您指定的切换间隔在每条消息之间显示基本消息。

/***Framework Code***/

//Configs
var BASE_MESSAGE = "MySite.Com";//Message to display every other time
var toggleInterval = 1000;//One second between each toggle

//Private Variables
var otherMessages = [];
var currentMessageIndex = 0;

/**
 * Updates the title, switching between the base text and iterating through 
 * the other messages
 */
var updateTitle = function(){
    //Toggle between messages
    if((currentMessage !== BASE_MESSAGE) || !otherMessages.length){
        //Display base message every other time
        document.title = BASE_MESSAGE;
    } else {
        //Display the next message in the list
        currentMessageIndex = currentMessageIndex++ %otherMessages.length;
        document.title = otherMessages[currentMessageIndex];
    }

    //Call again only if there are messages to show
    if(otherMessages.length){
        setTimeout(toggleInterval, updateTitle);
    }
};

/**
 * Adds a title message to display
 */
var addTitleMessage = function(message){
    otherMessages.push(message);

    //Avoid too many title updates
    if(otherMessages.length == 1){
        updateTitle();
    }
};

/**
 * Removes the specified title message from being displayed
 */
var removeTitleMessage = function(message){
    var removeIndex = otherMessages.indexOf(message);

    if(removeIndex != -1){
        otherMessages.splice(removeIndex, 1);
    }
};

.

/*** Your Code ***/
var newMessage = function(messageInfo){
    ..//Your normal new message code

    addTitleMessage(getMyDisplayMessage(messageInfo));
};

var readMessage = function(messageInfo){
    ..//Your normal read code

    removeTitleMessage(getMyDisplayMessage(messageInfo));
};

var getMyDisplayMessage = function(messageInfo){
    return messageInfo.name + " has messaged you.";
}

Answer 3

使用setInterval()或setTimeout()。在您的情况下，代码可能是这样的：

function toggleTitle() {
    if (document.title == 'MySite.Com') document.title = 'Rehan messsaged you';
    else document.title = 'MySite.Com'
}
var timer = setInterval(toggleTitle, 500);

此代码将使您的标题每 0.5 秒更改一次。要停止这种情况，请使用

清除间隔（定时器）；