JavaScript 监听标签页切换

JavaScript About 1,017 words

onvisibilitychange

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        document.onvisibilitychange = function () {
            if (document.visibilityState == "hidden") {
                document.title = "waiting for you!";
            } else {
                document.title = "welcome back~";
            }
        }
    </script>
</head>

<body>
    Hello document visibilitychange
</body>

</html>

onfocus onblur

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onfocus = function () {
            document.title = "welcome back~";
        };
        window.onblur = function () {
            document.title = "waiting for you!";
        };
    </script>
</head>

<body>
    Hello window focus blur
</body>

</html>

说明

onfocus和onblur能监听不同窗口之间的切换，更符合使用场景。

Views: 2,493 · Posted: 2021-06-09

———— END ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓