[实例] 浏览器标签栏滚动消息提示

Zoey Young 前端 JavaScript HTML 工作记录

需求: 在当前页面onblur(不是聚焦状态)时, 通过浏览器标签滚动文字来提示有新信息.

消息

先给两个直接能在本地运行的版本, 主要代码是scrollTitle函数, 使用了不同方式进行了封装

第一个版本:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>OK Computer</title>
    <script language="javascript">
    var docTitle = function() {
        var homeTitle = "OK Computer";
        var isWinFocus = true;
        var title = document.title;
        var scrollTitle = function() {
            document.title = title;
            title = title.substring(1, title.length) + title.substring(0, 1);
            if (!isWinFocus)
                setTimeout("docTitle.scroll()", 100);
            else {
                document.title = homeTitle;
                return true;
            }
        };
        return {
            scroll: function() {
                scrollTitle();
            },
            init: function(newTitle) {
                window.onblur = function() {
                    isWinFocus = false;
                    title = newTitle;
                    scrollTitle();
                };
                window.onfocus = function() {
                    isWinFocus = true;
                    document.title = homeTitle;
                };
            }
        };
    }();
    </script>
</head>
<body onload="docTitle.init('...您有新的消息...')">
</body>
</html>

第二个版本：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>OK Computer</title>
    <script language="javascript">
    var docTitle = {
        homeTitle: "OK Computer",
        newTitle: "...您有新消息...",
        isWinFocus: true,
        title: document.title,
        scrollTitle: function() {
            document.title = this.title;
            this.title = this.title.substring(1, this.title.length) + this.title.substring(0, 1);
            if (!this.isWinFocus)
                setTimeout("docTitle.scrollTitle()", 100);
            else {
                document.title = this.homeTitle;
                return true;
            }
        }
    };
    var init = function() {
        window.onblur = function() {
            docTitle.isWinFocus = false;
            docTitle.title = docTitle.newTitle;
            docTitle.scrollTitle();
        };
        window.onfocus = function() {
            docTitle.isWinFocus = true;
            document.title = docTitle.homeTitle;
        };
    }
    </script>
</head>
<body onload="init()">
</body>
</html>

第二种方式存在点问题, 还没理解, 就是把init函数放入docTitle里面, 使用docTitle.init()初始化并不能滚动文字, 所以把init()单独了出来

在程序中的使用方式：

/**
 * 浏览器标签标题滚动，对于使用iframe的地方会存在问题
 * @namespace IM
 * @class util.scrollTitle
 */
IM.util.scrollTitle = function() {
    // 编写窗口聚焦与离开状态
    $(window).bind('blur', function() {
        isWinFocus = false;
    }).bind('focus', function() {
        isWinFocus = true, document.title = IM.constant.HOME_TITLE;
    });
    var isWinFocus = true, title = document.title;
    var scroll = function() {
        document.title = title, title = title.substring(1, title.length) + title.substring(0, 1);
        isWinFocus ? document.title = IM.constant.HOME_TITLE : setTimeout(IM.util.scrollTitle.scroll, 200);
    };
    return {
        setTitle: function(newTitle) {
            if (!isWinFocus) { title = newTitle, scroll(); }
        },
        getIsWinFocus: function() {
            return isWinFocus;
        },
        setIsWinFocus: function(v) {
            isWinFocus = v;
        },
        scroll: function() {
          scroll();
        }
    };
}();

使用IM.util.scrollTitle.setTitle( '.XXX...来消息了...');进行调用.

这里在写时犯了个愚蠢的错误, 导致调试了很久, 那就是在scroll中设置标题, 结果在循环调用时一直重设了标题, 然后想不明白为啥不滚动, 最后才发现了问题, 把设置标题的函数另外提取了出来, 因为循环调用的是return里面的scroll而不是第一个scroll, 应该把两个东西取不同名称比较不会弄混(刚开始搞了同一个名字).

OK, 先整理到这, 有些东西还需要理解, 写得不熟练导致绕了点弯, 刚开始代码是分散开的, 初始化和变量定义都放在主程序中, 后来想想应该封装起来, 在主程序中直接调用, 而不是直接在主程序中定义, 所以就有了现在的代码. 放到其它程序中也应该好用的.