监听页面显示隐藏

浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。

document.hidden为true时为隐藏时触发，false时为显示时触发

document.addEventListener("visibilitychange", function() {
  console.log( document.hidden );
  // 逻辑处理
  if(document.hidden){
        //页面隐藏时触发代码
  }
});

监听页面后退popstate

//监听页面后退
pushHistory();
window.addEventListener("popstate", function (e) {
　　//页面后退时触发
}, false);

function pushHistory() {
    var state = {
        title: "title",
        url: "#"
    };
    window.history.pushState(state, "title", "#");
}

页面刷新前触发onbeforeunload 

window.onbeforeunload = function () {
    //页面刷新前触发
}

页面显示(pageshow)和页面隐藏(pagehide)事件

window.addEventListener('pagehide', () => {
    console.log('隐藏');
})
window.addEventListener('pageshow', () => {
    console.log('显示');
})