在逛各位大触空间的时候发现一个一颗赛艇的功能,“离开和进入页面时改变title”

离开页面:(つェ⊂)好像崩溃了啦~
返回页面:(´∇`) 哈哈,骗你的啦~,等待2s恢复原来title


实现原理:

使用了HTML5的Page Visibility API 目前页面可见性API有两个属性,一个事件,如下:
document.hidden: Boolean值,表示当前页面可见还是不可见
document.visibilityState: 返回当前页面的可见状态,取值有 hidden visible prerender preview
visibilitychange: 当可见状态改变时候触发的事件

代码如下:

<!-- 离开和进入页面时改变title -->
<script>
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        document.title = '(つェ⊂)好像崩溃了啦~';
        clearTimeout(titleTime);
    }
    else {
        document.title = '(*´∇`*) 哈哈,骗你的啦~' + OriginTitile;
        titleTime = setTimeout(function() {
            document.title = OriginTitile;
        }, 2000);
    }
});
</script>

再操作一下还可以修改图标:

<!-- 离开和进入页面时改变title及ico -->
<script>
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        $('[rel="shortcut icon"]').attr("href", "离开页面图标链接");
        document.title = '(つェ⊂)好像崩溃了啦~';
        clearTimeout(titleTime);
    }
    else {
        $('[rel="shortcut icon"]').attr("href", "进入页面图标链接");
        document.title = '(*´∇`*) 哈哈,骗你的啦~' + OriginTitile;
        titleTime = setTimeout(function() {
            document.title = OriginTitile;
        }, 2000);
    }
});
</script>