来自:用户不在当前标签页面改变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>
实际效果可以在不同窗口下切换就看到