tabs change & Page Visibility All In One
tabs change & Page Visibility All In One
Page Visibility API
https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
https://www.w3.org/TR/page-visibility-2/
document.visibilityState
document.addEventListener("visibilitychange", () => {
console.log(document.visibilityState);
// ✅
})
document.hidden
document.addEventListener("visibilitychange", () => {
console.log(document.hidden);
// ⚠️
})
tabs change
hidden
visible
demos
http://daniemon.com/tech/webapps/page-visibility/
// Set the name of the hidden property and the change event for visibility
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
var videoElement = document.getElementById("videoElement");
// If the page is hidden, pause the video;
// if the page is shown, play the video
function handleVisibilityChange() {
if (document[hidden]) {
videoElement.pause();
} else {
videoElement.play();
}
}
// Warn if the browser doesn't support addEventListener or the Page Visibility API
if (typeof document.addEventListener === "undefined" || hidden === undefined) {
console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {
// Handle page visibility change
document.addEventListener(visibilityChange, handleVisibilityChange, false);
// When the video pauses, set the title.
// This shows the paused
videoElement.addEventListener("pause", function(){
document.title = 'Paused';
}, false);
// When the video plays, set the title.
videoElement.addEventListener("play", function(){
document.title = 'Playing';
}, false);
}
refs
https://alligator.io/js/page-visibility-api/
https://codepen.io/alligatorio/pen/xxGybyM
https://testdrive-archive.azurewebsites.net/Performance/PageVisibility/Default.html
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/14575539.html
未经授权禁止转载,违者必究!