通过网页title来提示用户有新消息这个功能很常见,比如现在的微博,还有一些邮箱,这个功能都很常见。如何实现则个功能呢?

思路是:通过ajax访问后台,若有新消息,则将网页的title替换为 提示信息 ,并与空格来回切换。例:【你有新消息】与【     】切换。提示内容弄是动态的,所以替换文字的空格数目也是算出的。这里用全角的空格。但是如果提示消息中有‘数字’等半角字符的话就会出现问题。全角的空格比半角的1的宽度要宽的多。这样的话,闪动起来看着就不是很舒服;解决方法就是用全角的空格替换全角的字符,半角的空格替换半角的字符。

但是document.title=' ';不论半角空格有多少个,浏览器只显示一个。用 的话,它原样输出;只能用var t=document.getElementsByTagName('title')[0]。获取title dom对象,通过 t.innerHTML=' '来修改。

效果演示

显示信息数:

开始闪动

停止闪动

但会这么顺利么,当然不会。我们可爱的ie在这个时候总会出来捣乱。在ie浏览器下title的innerHTML是只读的(不光是title,其它的如:COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TR的innerHTML属性是只读的)。如果强制赋值的话会出现“未知的运行时错误”。目前我也没有找到很到的办法,只能加上try{}catch(e){}对它进行特殊处理了

分享下源代码:

var flashTitlePlayer = {

start: function (msg) {

this.title = document.title;

if (!this.action) {

try {

this.element = document.getElementsByTagName('title')[0];

this.element.innerHTML = this.title;

this.action = function (ttl) {

this.element.innerHTML = ttl;

};

} catch (e) {

this.action = function (ttl) {

document.title = ttl;

}

delete this.element;

}

this.toggleTitle = function () {

this.action('【' + this.messages[this.index = this.index == 0 ? 1 : 0] + '】');

};

}

this.messages = [msg];

var n = msg.length;

var s = '';

if (this.element) {

var num = msg.match(/\w/g);

if (num != null) {

var n2 = num.length;

n -= n2;

while (n2 > 0) {

s += " ";

n2--;

}

}

}

while (n > 0) {

s += ' ';

n--;

};

this.messages.push(s);

this.index = 0;

this.timer = setInterval(function () {

flashTitlePlayer.toggleTitle();

}, 1000);

},

stop: function () {

if (this.timer) {

clearInterval(this.timer);

this.action(this.title);

delete this.timer;

delete this.messages;

}

}

};

function flashTitle(msg) {

flashTitlePlayer.start(msg);

}

function stopFlash() {

flashTitlePlayer.stop();

}

火狐,chrome下没问题,ie当提示消息中有一个或没有半角字符时没问题。

html浏览器标题闪动,如何实现网页标题的闪动提示相关推荐

  1. html中怎么改标题,html怎么改网页标题

    在html中,可以使用title标签修改网页标题,具体语法格式为" 网页标题内容".title元素可定义文档的标题,浏览器会以特殊的方式来使用标题,并且通常把它放置在浏览器窗口的标 ...

  2. 怎么改vue项目的标题_Vue动态修改网页标题的方法及遇到问题

    业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三). Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案: 一.最笨方案 ...

  3. python控制浏览器模拟鼠标点击网页标题_如何使用python来模拟鼠标点击(将经过实例自动化模拟在360浏览器中自动搜索python)...

    1.准备工做:html 安装pywin32,后面开发须要pywin32的支持,不然没法完成与windows层面相关的操做.python pywin32的具体安装及注意事项:shell 一.总体开发环境 ...

  4. php获取网页标题接口,PHP获取网页标题的3种实现方法代码实例

    一.推荐方法 CURL获取 $c = curl_init(); $url = 'www.jb51.net'; curl_setopt($c, CURLOPT_URL, $url); curl_seto ...

  5. 浏览器-网页标题的图标

    为网页标题添加图标 一.图标格式 一般网页标题前的小图标是 ico 格式,但其实png,jpg的格式都可以,而且浏览器会自动帮你把图片尺寸缩放到16 *16.不过.ico格式体积要小很多,另外注意透明 ...

  6. Chrome浏览器怎么调试网页标题字体大小和颜色?

    出于兴趣了解了一下,在此记录一下,可以供web开发初学者看看哦! Chrome因为其十分好用的DevTools受广大开发者的喜好,下面一步一步教大家怎么用Chrome调试网页标题的和字体大小和颜色. ...

  7. Android微信浏览器标题,微信浏览器设置网页标题

    一般设置网页标题只需要document.title = '首页'就可以 但是奈何微信浏览器比较特殊 只渲染一次便不再更新title 所以可以先创建一个iframe 然后再删除 亲测有效 setTitl ...

  8. html文件语言表示网页标题,HTML网页基本结构(HTML文件、编程语言)——十一号笔记...

    一.HTML基本结构 一个HTML文档是由一系列的元素和标签组成,元素名不区分大小,HTML用标签来规定元素的属性和它在文件中的位置. HTML超文本文档分文档头合文档体两部分,在文档头里对这个文档进 ...

  9. 如何给网页标题添加icon小图标

    今天给大家分享的是如何在网页标题中加入小图标,就像CSDN前面那个红色的C一样. 主要介绍两种方法: 1.在html文件的head部分添加下面代码(注意href的路径). <link rel=& ...

最新文章

  1. 计算机录入速度标准,怎么提高电脑录入速度?
  2. 配置JDK时环境变量path和JAVA_HOME的作用
  3. Mac中Finder是什么?怎么打开?
  4. codevs 1729 单词查找树
  5. 软件测试作业随笔之二:Homework 2
  6. 发明专利写作常用模板和注意事项
  7. java基础之API(String)
  8. Python:整数的阶乘
  9. 多元相关性分析_多元统计分析与R语言建模之相关分析与回归分析
  10. 固定翼飞机数学建模入门(姿态角篇)
  11. Beta版本——第五次冲刺博客
  12. C#如何遍历文件夹下的所有文件
  13. 数字信号处理FFT快速傅立叶变换MATLAB实现——实例
  14. 惊讶!我定的日志规范被CTO在全公司推广了
  15. input光标位置设置至行末端
  16. 小程序 微信统计表格_微信小程序制作表格的方法
  17. Qt获取IP地址、MAC地址等网卡信息,区分本地网卡、无线网卡和虚拟网卡
  18. 5G和WiFi6的故事
  19. [内附完整源码和文档] 基于Java的宾馆住宿管理系统
  20. MATLAB降维工具箱

热门文章

  1. 怎样让宝贝从小做一个有道德的人?
  2. 线程切换哪家强?RxJava与Flow的操作符对比
  3. Python小游戏:BMI指数的计算
  4. 网页特效大公开(转)
  5. 飞跃计划 | 袋鼠云与睿呈时代达成战略合作,携手助推传统行业数字化转型
  6. 数睿数据的四域模型(软件=数据+形式)源何引发强烈关注?
  7. 联想小新一键恢复小孔_联想小新电脑一键恢复出厂设置
  8. Mybatis 之 二级缓存
  9. python 匹配段落_段落匹配Python
  10. 商城后台管理React+Springboot