html浏览器标题闪动,如何实现网页标题的闪动提示
通过网页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浏览器标题闪动,如何实现网页标题的闪动提示相关推荐
- html中怎么改标题,html怎么改网页标题
在html中,可以使用title标签修改网页标题,具体语法格式为" 网页标题内容".title元素可定义文档的标题,浏览器会以特殊的方式来使用标题,并且通常把它放置在浏览器窗口的标 ...
- 怎么改vue项目的标题_Vue动态修改网页标题的方法及遇到问题
业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三). Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案: 一.最笨方案 ...
- python控制浏览器模拟鼠标点击网页标题_如何使用python来模拟鼠标点击(将经过实例自动化模拟在360浏览器中自动搜索python)...
1.准备工做:html 安装pywin32,后面开发须要pywin32的支持,不然没法完成与windows层面相关的操做.python pywin32的具体安装及注意事项:shell 一.总体开发环境 ...
- php获取网页标题接口,PHP获取网页标题的3种实现方法代码实例
一.推荐方法 CURL获取 $c = curl_init(); $url = 'www.jb51.net'; curl_setopt($c, CURLOPT_URL, $url); curl_seto ...
- 浏览器-网页标题的图标
为网页标题添加图标 一.图标格式 一般网页标题前的小图标是 ico 格式,但其实png,jpg的格式都可以,而且浏览器会自动帮你把图片尺寸缩放到16 *16.不过.ico格式体积要小很多,另外注意透明 ...
- Chrome浏览器怎么调试网页标题字体大小和颜色?
出于兴趣了解了一下,在此记录一下,可以供web开发初学者看看哦! Chrome因为其十分好用的DevTools受广大开发者的喜好,下面一步一步教大家怎么用Chrome调试网页标题的和字体大小和颜色. ...
- Android微信浏览器标题,微信浏览器设置网页标题
一般设置网页标题只需要document.title = '首页'就可以 但是奈何微信浏览器比较特殊 只渲染一次便不再更新title 所以可以先创建一个iframe 然后再删除 亲测有效 setTitl ...
- html文件语言表示网页标题,HTML网页基本结构(HTML文件、编程语言)——十一号笔记...
一.HTML基本结构 一个HTML文档是由一系列的元素和标签组成,元素名不区分大小,HTML用标签来规定元素的属性和它在文件中的位置. HTML超文本文档分文档头合文档体两部分,在文档头里对这个文档进 ...
- 如何给网页标题添加icon小图标
今天给大家分享的是如何在网页标题中加入小图标,就像CSDN前面那个红色的C一样. 主要介绍两种方法: 1.在html文件的head部分添加下面代码(注意href的路径). <link rel=& ...
最新文章
- 计算机录入速度标准,怎么提高电脑录入速度?
- 配置JDK时环境变量path和JAVA_HOME的作用
- Mac中Finder是什么?怎么打开?
- codevs 1729 单词查找树
- 软件测试作业随笔之二:Homework 2
- 发明专利写作常用模板和注意事项
- java基础之API(String)
- Python:整数的阶乘
- 多元相关性分析_多元统计分析与R语言建模之相关分析与回归分析
- 固定翼飞机数学建模入门(姿态角篇)
- Beta版本——第五次冲刺博客
- C#如何遍历文件夹下的所有文件
- 数字信号处理FFT快速傅立叶变换MATLAB实现——实例
- 惊讶!我定的日志规范被CTO在全公司推广了
- input光标位置设置至行末端
- 小程序 微信统计表格_微信小程序制作表格的方法
- Qt获取IP地址、MAC地址等网卡信息,区分本地网卡、无线网卡和虚拟网卡
- 5G和WiFi6的故事
- [内附完整源码和文档] 基于Java的宾馆住宿管理系统
- MATLAB降维工具箱