banner
DIYgod

Hi, DIYgod

写代码是热爱,写到世界充满爱!
github
twitter
bilibili
telegram
email
steam
playstation
nintendo switch

我藏好了哦

titlehide

Sonic 853看到的神奇的一幕,一顆賽艇,果斷扒來水一貼

原作者:成天不高興的栗山未來

** 什麼鬼:** 離開和進入頁面時改變 title

原理:

使用了 HTML5 的 Page Visibility API

目前頁面可見性 API 有兩個屬性,一個事件,如下:

document.hidden: Boolean 值,表示當前頁面可見還是不可見

document.visibilityState: 返回當前頁面的可見狀態,取值有 hidden visible prerender preview

visibilitychange: 當可見狀態改變時候觸發的事件

以前只知道可以通過 iframe + onblur/onfocus 事件來檢測頁面可見性,有了這個 API 真是方便優雅了很多啊

代碼:

var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        document.title = '(つェ⊂)我藏好了哦~ ' + OriginTitile;
        clearTimeout(titleTime);
    }
    else {
        document.title = '(*´∇`*) 被你發現啦~ ' + OriginTitile;
        titleTime = setTimeout(function() {
            document.title = OriginTitile;
        }, 2000);
    }
});
載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。