html浏览器标题闪动,一个网页标题title的闪动提示效果实现思路
通过网页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浏览器标题闪动,一个网页标题title的闪动提示效果实现思路相关推荐
- Trick(二)——获取一个网页的 title 信息
所谓网页的 title 信息,就是在一个浏览器打开一个网页,在浏览器的顶部显示的标题信息.那么又该如何获取这一 title 信息,进行拷贝,而不是手动输入呢? ctrl + shift + i:进入开 ...
- python获取网页标题_Python2获取网页标题
Python获取网页标题 使用Python2.x的urllib2和lxml,速度应该还快于BeautifulSoup4(话说回来,为什么大家都要用BS4呢?一个XPATH不就完了吗) 没有安装过的,用 ...
- JS代码实现浏览器切换页面时网页标题动态切换
onfocus 和 onblur 事件,监听离开页面和进入页面 <script> var normalTitle = document.title window.onfocus = fun ...
- java gui 嵌入浏览器,让java gui在web浏览器中打开一个网页
I am trying to get a java gui to open a web page. So the gui runs some code that does things and the ...
- 如何利用SEO技术设置文章网页标题
如何利用SEO技术设置文章网页标题 做SEO优化的朋友都知道一个基本原则,那就是网站最核心的权重排名就是集中在网站首页,而影响排名最大的因素就是网站标题,一个设置标题得当的网站,如果关键字竞争不是很大 ...
- excel批量提取网页标题
最近时间比较忙,有时候很多网页需要临时保存,以便空闲的时候查看.单纯的保存网页链接会让人很枯燥,所以需要自动批量提取标题. 为了这个小功能去写个小程序有点不划算,所以就利用excel实现了这个功能. ...
- html课做一个网页,菜鸟自学建站 HTML 第三课 制作我的第一个网页_html/css_WEB-ITnose...
上一课我们了解了Dreamweaver的工作界面,从这节课开始,我们由浅入深的开始学习网页的制作. 首先打开Dreamweaver,制作网页首先要新建一个文档,就像我们写文稿需要一张纸一样. 只有有了 ...
- 浏览器调试移动端网页包括安卓和苹果两种设备
情景:手机浏览器上打开一个网页发现界面出错了,可在电脑浏览器上运行的明明很完美,但是我无法对手机浏览器上的页面进行审核元素:这可怎么调试啊,怎样才能知道它在哪里错了! 解决方案有两个: 一:引入vco ...
- html浏览器标题闪动,如何实现网页标题的闪动提示
通过网页title来提示用户有新消息这个功能很常见,比如现在的微博,还有一些邮箱,这个功能都很常见.如何实现则个功能呢? 思路是:通过ajax访问后台,若有新消息,则将网页的title替换为 提示信息 ...
最新文章
- 使用cat,awk和sort命令从nginx访问日志中统计user-agent类型
- 网易是世界最好的公司
- 智能计算机和智能化网络结论,人工智能技术中计算机网络技术的应用
- 画原理图和PCB图该注意什么?
- 【JavaSE_08】Java中static、继承、重写
- php 下载exe 打不开,EXE文件打不开的解决方法
- SetWindowLong
- Eclipse输入Java和XML代码自动提示功能最简单的方法
- beaninfo详解源码解析 java_【Spring源码分析】Bean加载流程概览
- CentOS配置服务开机自启
- 软引用和弱引用的应用场景
- UIAlterController-ios8弹出菜单
- 内存卡无法格式化 修复
- matlab纹理分析,基于MATLAB的遥感影像纹理特征分析
- 康耐视智能相机更新固件版本方式
- Spring —— Spring 手册官网下载地址
- 平江南江计算机培训,平江县南江学区: 假期培训促提升,收心归位再出发
- 数据库课程设计 人事管理系统
- 深入理解Java虚拟机(周志明第三版)- 第八章:虚拟机字节码执行引擎
- 基于内容的图片检索CBIR简介
热门文章
- 获取淘宝客推广位id(adzone_id)
- 0基础学图论!——图论精讲/详细/新手理解概念必看!
- 健康贴示(尽力每日更新)2007-02-12
- java文件中搜索的快捷键_MyEclipse中的查找快捷键
- Java面向对象综合训练综合练习
- Prege(图计算框架)l: A System for Large-Scale Graph Processing(译)
- 职场修炼--你开口说话的境界在第几层?
- 高中数学:求数列通项公式的十一种方法(方法全,例子全,归纳细)
- Silent Install Builder制作静默安装包实现软件自动部署
- BackTrack5安装笔记