一个网页标题title的闪动提示效果实现思路_javascript技巧
程序员文章站
2022-04-10 11:37:54
...
通过网页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){}对它进行特殊处理了
分享下源代码:
火狐,chrome下没问题,ie当提示消息中有一个或没有半角字符时没问题。
思路是:通过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){}对它进行特殊处理了
分享下源代码:
复制代码 代码如下:
火狐,chrome下没问题,ie当提示消息中有一个或没有半角字符时没问题。
上一篇: 关于弹性盒布局的介绍(附代码)
下一篇: PHP实现递归简单方法
推荐阅读
-
js实现网页标题栏闪烁提示效果实例分析_javascript技巧
-
js实现的标题栏新消息闪烁提示效果_javascript技巧
-
一个JS函数搞定网页标题(title)闪动效果_javascript技巧
-
js实现的标题栏新消息闪烁提示效果_javascript技巧
-
JS实现闪动的title消息提醒效果_javascript技巧
-
JS实现消息来时让网页标题闪动效果的方法_javascript技巧
-
js实现网页标题栏闪烁提示效果实例分析_javascript技巧
-
一个网页标题title的闪动提示效果实现思路_javascript技巧
-
JS实现超简洁网页title标题跑动闪烁提示效果代码_javascript技巧
-
一个网页标题title的闪动提示效果实现思路_javascript技巧