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, 禁止转载 🈲️，侵权必究⚠️！

---