[go] go language actual combat – realize Title flicker

Time:2020-11-28

In the process of implementing the customer service system, the title bar will flash when there is a new message

Because the chat box is the page that is entered by the iframe box, after receiving the websocket message in the chat box, the message should be sent to the parent page, and the title will flash in the parent page

 

 

 

Test page address:

https://gofly.sopans.com/

 

 

The implementation of sending the child page to the parent page is to add message listening in the parent page and send messages to the child page

Subpage:

window.parent.postMessage(redata);

The parent page receives the message and calls the function, and the title is constantly switched

window.addEventListener('message',function(e){
    var msg=e.data;
    if(msg.type=="message"){
        Flashtitle(); // Title flashes
    }
});
var titleTimer,titleNum=0;
var originTitle = document.title;
function flashTitle() {
    titleNum++;
    if (titleNum == 3) {
        titleNum = 1;
    }
    if (titleNum == 1) {
        document.title = '【】' + originTitle;
    }
    if (titleNum == 2) {
        document.title  ='[you have a message]' + origintitle;
    }
    titleTimer = setTimeout("flashTitle()", 500);
}

When you return to the page, the title stops switching

window.onfocus = function () {
    clearTimeout(titleTimer);
    document.title = originTitle;
};

 

Recommended Today

PHP 12th week function learning record

sha1() effect sha1()Function to evaluate the value of a stringSHA-1Hash. usage sha1(string,raw) case <?php $str = “Hello”; echo sha1($str); ?> result f7ff9e8b7bb2e09b70935a5d785e0cc5d9d0abf0 sha1_file() effect sha1_file()Function calculation fileSHA-1Hash. usage sha1_file(file,raw) case <?php $filename = “test.txt”; $sha1file = sha1_file($filename); echo $sha1file; ?> result aaf4c61ddcc5e8a2dabede0f3b482cd9aea9434d similar_text() effect similar_text()Function to calculate the similarity between two strings. usage similar_text(string1,string2,percent) case […]