2021-10-07

思路是:通过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){}对它进行特殊处理了 分享下源代码:

 

 

 

<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] + '】欢迎访问简明现代魔法');
                };
            }
            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>

 

 

 

经测试火狐,chrome下没问题,ie当提示消息中有一个或没有半角字符时没问题。

 

打赏

好文章,更需要你的鼓励

本文由 氢设计 创作,除注明转载/出处外,均为本站原创,转载前请务必署名

最后编辑时间为:2021-11-23 10:21:01

本文链接:https://www.h2sheji.com/show-44.html