来自：用户不在当前标签页面改变title

实现代码

简单有效，将整个窗口绑定onblur和onfocus。
全选复制放进笔记

window.onblur = function() { document.title = "(●—●)";
}; window.onfocus = function() { document.title = "啦啦啦啦";
}

浏览器兼容性

目前主流的标准浏览器基本都已经支持，部门旧版浏览器需要增加内核前缀，IE从10开始支持。

常见应用场景

幻灯片播放时可在不可见时停止播放，恢复显示后继续播放
每隔一段时间向服务器请求数据的可在切换可见性时停止，减轻服务器负担
网站访问统计提供跟准确的数据
网站title根据可见性变换

例如在typecho主题里footer.php里添加

<script>
window.onblur = function() {
    document.title = "你在看什么呢？";
window.onfocus = function() {
    document.title = "<?php $this->archiveTitle(array(
            'category'  =>  _t('分类 %s 下的文章'),
            'search'    =>  _t('包含关键字 %s 的文章'),
            'tag'       =>  _t('标签 %s 下的文章'),
            'author'    =>  _t('%s 发布的文章')
        ), '', ' - '); ?><?php $this->options->title(); ?>";
    }
};
</script>

另一个版本在http://blog.iplayloli.com/看到的

<script>
        var changeTitle = {
    originTitle: document.title,
    change: function() {
        document.title = " 草榴社區 - t66y.com ";
    },
    reset: function() {
        document.title = changeTitle.originTitle;
    }
};
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        changeTitle.change();
    } else {
        changeTitle.reset();
    }
});
</script>

chrome下右键“查看网页源代码”，就会看到

<script>
window.onblur = function() {
    document.title = "你在看什么呢？";
window.onfocus = function() {
    document.title = "用户不在当前标签页面改变title - 52M";
    }
};
</script>

实际效果可以在不同窗口下切换就看到

标签：JavaScript

你的评论