专栏首页陶士涵的菜地[Go] GO语言实战-实现标题闪烁

[Go] GO语言实战-实现标题闪烁

在实现客服系统的过程中,需要有新消息的时候标题栏闪烁提示

因为聊天框是被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;
};

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [PHP] 使用xdebug查看php的性能损耗

    xdebug除了调试程序外 , 还可以来检测程序的性能损耗点 , 展示成图表的形式

    陶士涵
  • [GO] golang练习项目-gorm与mysql的增删查改操作

    陶士涵
  • [PHP] error_reporting(0)可以屏蔽Fatal error错误

    按照以前的印象,error_reporting(0)屏蔽不了php的Fatal error级别的错误。 但是今天我遇到了一个问题才发现,它竟然可以屏蔽任何错误,...

    陶士涵
  • 项目推荐 | 基于 Vue2.0 的 App 轻量框架

    vue app,基于 Vue2.0 开发用于快速搭建 App 的轻量框架。 项目说明 JTaro 是一款基于 Vue2.0 开发的轻量级 SPA(单页应用)框架...

    码云Gitee
  • Starship 简体中文翻译已上线

    Starship 是支持各种 shell(包括 bash、zsh、fish、powershell 等)的提示符配置工具,使用 Rust 编写,轻量高效而且高度可...

    MikeLoveRust
  • 标准没有规定C/C++表达式求值顺序

    对于表达式,标准并没有规定计算顺序,所以下列代码的运行结果存在多样性:

    一见
  • CCF YOCSEF 上海专题论坛 | 打通科技成果转化任督二脉

          近日,腾讯高校合作与CCF YOCSEF上海联合组织了“打通科技成果转化任督二脉:溯源还是改制”专题论坛。本次论坛邀请到了华东师范大学科技处副处长...

    腾讯高校合作
  • 2种常见软件项目工作量评估方法简述

      本文的目标读者是从事软件行业想快速了解软件开发过程工作量评估的人员。软件工作量评估方法很多,如代码行法、类比法、WBS、故事点、用例点、NESMA、FPA、...

    软件造价评估联盟
  • 史上最好的思维导图中文教程

    用户1756920

扫码关注云+社区

领取腾讯云代金券