JS monitors switching between browser tabs-visibilitychange event introduction

JS monitors the switching between browser tabs

I have seen some web pages before. When the label is switched to another address, the title on the web page will change. I have never known how to do this. I recently checked some information and found that there is a visibilitychange event that can be done. Here I will Introducing a simple application of the Page Visibility API.

Simply put, when the user minimizes a webpage or moves to another tab, the API sends a visibilitychange event regarding the visibility of that webpage. You can detect the event and perform some action or behavior. For example: stop playing music videos when the tab is hidden, stop some unnecessary polling, stop some looping animation effects such as carousels, etc. These save server and local overhead.

document visibility property

Page Visibility (Second Edition) defines two read-only document attributes: hidden and visibilityState.

Among them, document.hidden is a Boolean value, which simply means that the tab page is displayed or hidden. The document.visibilityState property is more detailed and currently has four possible values:

visible : The page content is at least partially visible. This means that in reality, the page is a visible tab in a non-minimized window.

hidden: The page content is invisible to the user. In practice, this means that the document is part of a background tab or minimized window, or when the system is locked.

prerender: Web page content is prerendered and invisible to the user.

unloaded : If the document is unloaded, this value will be returned.

Under normal circumstances, we use document.hidden to meet common needs.

In order to support older versions of browsers, we need to do some prefix processing on document.hidden:

Example

<video id="videoElement" controls loop>
    <source src="https://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
    <source src="https://www.runoob.com/try/demo_source/mov_bbb.ogg" type="video/ogg">
</video>
    
// 设置隐藏属性和改变可见属性的事件的名称
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
    hidden = "hidden";
    visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
    hidden = "mozHidden";
    visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
}
// 添加监听器
document.addEventListener(visibilityChange, function () {
    console.log("当前页面是否被隐藏：" + document[hidden]);
}, false);

console.log(hidden, visibilityChange)

var videoElement = document.getElementById("videoElement");

// 如果页面是隐藏状态，则暂停视频
// 如果页面是展示状态，则播放视频
function handleVisibilityChange() {
    if (document[hidden]) {
        videoElement.pause();
    } else {
        videoElement.play();
    }
}

// 如果浏览器不支持addEventListener 或 Page Visibility API 给出警告
if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
    console.log(
        "This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API."
    );
} else {
    // 处理页面可见属性的改变
    document.addEventListener(visibilityChange, handleVisibilityChange, false);

    // 当视频暂停，设置title
    // This shows the paused
    videoElement.addEventListener("pause", function () {
        document.title = 'Paused';
    }, false);

    // 当视频播放，设置title
    videoElement.addEventListener("play", function () {
        document.title = 'Playing';
    }, false);
}