标签:style http java io ar art 问题 div cti
通过网页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){}对它进行特殊处理了
分享下源代码:
01 |
<script type= "text/javascript" language= "javascript" > |
02 |
var flashTitlePlayer = { |
03 |
start: function (msg) { |
04 |
this .title = document.title; |
05 |
if (! this .action) { |
06 |
try { |
07 |
this .element = document.getElementsByTagName( ‘title‘ )[0]; |
08 |
this .element.innerHTML = this .title; |
09 |
this .action = function (ttl) { |
10 |
this .element.innerHTML = ttl; |
11 |
}; |
12 |
} catch (e) { |
13 |
this .action = function (ttl) { |
14 |
document.title = ttl; |
15 |
} |
16 |
delete this .element; |
17 |
} |
18 |
this .toggleTitle = function () { |
19 |
this .action( ‘【‘ + this .messages[ this .index = this .index == 0 ? 1 : 0] + ‘】欢迎访问简明现代魔法‘ ); |
20 |
}; |
21 |
} |
22 |
this .messages = [msg]; |
23 |
var n = msg.length; |
24 |
var s = ‘‘ ; |
25 |
if ( this .element) { |
26 |
var num = msg.match(/\w/g); |
27 |
if (num != null ) { |
28 |
var n2 = num.length; |
29 |
n -= n2; |
30 |
while (n2 > 0) { |
31 |
s += " " ; |
32 |
n2--; |
33 |
} |
34 |
} |
35 |
} |
36 |
while (n > 0) { |
37 |
s += ‘ ‘ ; |
38 |
n--; |
39 |
}; |
40 |
this .messages.push(s); |
41 |
this .index = 0; |
42 |
this .timer = setInterval( function () { |
43 |
flashTitlePlayer.toggleTitle(); |
44 |
}, 1000); |
45 |
}, |
46 |
stop: function () { |
47 |
if ( this .timer) { |
48 |
clearInterval( this .timer); |
49 |
this .action( this .title); |
50 |
delete this .timer; |
51 |
delete this .messages; |
52 |
} |
53 |
} |
54 |
}; |
55 |
function flashTitle(msg) { |
56 |
flashTitlePlayer.start(msg); |
57 |
} |
58 |
function stopFlash() { |
59 |
flashTitlePlayer.stop(); |
60 |
} |
61 |
</script> |
火狐,chrome下没问题,ie当提示消息中有一个或没有半角字符时没问题。
标签:style http java io ar art 问题 div cti
原文地址:http://www.cnblogs.com/laoyangman/p/3936606.html