网页标题title的闪动提示

最新推荐文章于 2023-02-03 20:00:16 发布

luanxiyuan

最新推荐文章于 2023-02-03 20:00:16 发布

阅读量469

点赞数

分类专栏：经(cǎi)验(kēng)总结文章标签： javascript java ViewUI

本文链接：https://blog.csdn.net/luanxiyuan/article/details/84463259

版权

经(cǎi)验(kēng)总结专栏收录该内容

251 篇文章 3 订阅

订阅专栏

通过网页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){}对它进行特殊处理了.

下面是我的jsp demo代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>title闪动练习</title>
    </head>
    <script type="text/javascript" language="javascript">
        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] + '】标题title闪动提示');
                    };
                }
                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();
        }
    </script>
    <body>
        <h4>效果演示</h4>
        <p>显示信息数：<input id="textMsgs" value="3"></p>
        <button title="开始闪动" onclick="flashTitle('您有' + document.getElementById('textMsgs').value + '条新信息');">开始闪动</button>
        <button title="停止闪动" onclick="stopFlash();">停止闪动</button>
    </body>
</html>