在實作客服系統的程序中,需要有新訊息的時候標題欄閃爍提示
因為聊天框是被iframe框進去的頁面,所以在聊天框中收到websocket訊息以后要把訊息發送給父集頁面,在父頁面中閃爍標題
測驗頁面地址:
https://gofly.sopans.com/
子頁面發送到父頁面的實作是,在父頁面增加訊息監聽,子頁面發送訊息
子頁面:
window.parent.postMessage(redata);
父頁面收到訊息呼叫函式,標題不停切換
window.addEventListener('message',function(e){ var msg=e.data; if(msg.type=="message"){ flashTitle();//標題閃爍 } });
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 = '【你有一條訊息】' + originTitle; } titleTimer = setTimeout("flashTitle()", 500); }
當回到該頁面時標題停止切換
window.onfocus = function () { clearTimeout(titleTimer); document.title = originTitle; };
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/25018.html
標籤：JavaScript
上一篇：求助，這個問題不知道是怎么回事
下一篇：vue父組件促發子組件中的方法