I have hidden it.

Nov 12, 2015#分享境1459

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

The author discovered a fascinating scene on Sonic 853 and decided to share it. The scene involved changing the title of a webpage when entering or leaving it. The author explained that this was achieved using HTML5's Page Visibility API, which has properties and events related to the visibility of a webpage. Previously, the author only knew about using iframe and onblur/onfocus events to detect visibility, but this API made it much more convenient. The provided code demonstrated how to change the title of a webpage based on its visibility status.

titlehide

Witnessed a magical scene on Sonic 853, a kayak, decisively posted it to the water.

Original Author: Kurayama Mirai, who is unhappy all day

What the hell: Changing the title when leaving and entering the page

Principle:

Using the HTML5 Page Visibility API

Currently, the page visibility API has two properties and one event, as follows:

document.hidden: A boolean value indicating whether the current page is visible or not.

document.visibilityState: Returns the visibility state of the current page, with possible values of hidden, visible, prerender, and preview.

visibilitychange: An event triggered when the visibility state changes.

Previously, I only knew that I could detect page visibility through iframe + onblur/onfocus events. With this API, it's much more convenient and elegant.

Code:

var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        document.title = '(つェ⊂) I've hidden it~ ' + OriginTitile;
        clearTimeout(titleTime);
    }
    else {
        document.title = '(*´∇｀*) You found it~ ' + OriginTitile;
        titleTime = setTimeout(function() {
            document.title = OriginTitile;
        }, 2000);
    }
});