Page Visibility API All In One

Page Visibility API All In One

tab active change event / 前端监控

https://caniuse.com/?search=Page Visibility API

pagehide

https://caniuse.com/?search=pagehide

pageshow

https://caniuse.com/?search=pageshow

Page Visibility API

Properties

• Document.hidden ⚠️ 过时了，pre-rendered 可能会不准确
• Document.visibilityState ✅

Events

• visibilitychange

https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

Page Visibility Level 2

W3C Discontinued Draft 23 June 2022

https://www.w3.org/TR/page-visibility-2/

demos

//startSimulation and pauseSimulation defined elsewhere

function handleVisibilityChange() {
  if (document.hidden) {
    // pauseSimulation();
  } else  {
    // startSimulation();
  }
}

document.addEventListener("visibilitychange", handleVisibilityChange, false);

document.visibilityState vs document.hidden

document.addEventListener("visibilitychange", () => {
  console.log(document.visibilityState);
  // ✅
})

https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState

document.addEventListener("visibilitychange", () => {
  console.log(document.hidden);
  // ⚠️ 过时了，pre-rendered 可能会不准确
});

document.hidden ⚠️ 过时了，pre-rendered 可能会不准确

https://developer.mozilla.org/en-US/docs/Web/API/Document/hidden

Web API

MDN

addEventListener('pageshow', (event) => { });
onpageshow = (event) => { };

https://developer.mozilla.org/en-US/docs/Web/API/Window/pageshow_event

addEventListener('pagehide', (event) => { });
onpagehide = (event) => { };

https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event

addEventListener('DOMContentLoaded', (event) => {});
onDOMContentLoaded = (event) => { };

https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

addEventListener("load", (event) => {});
onload = (event) => {};

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

addEventListener('beforeunload', (event) => { });
onbeforeunload = (event) => { };

https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

addEventListener('unload', (event) => { });
onunload = (event) => { };

https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event

潜在 bug 问题❌

https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event#usage_notes

refs

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---