监听浏览器刷新事件,拦截浏览器返回，js监听移动端浏览器页面显示、隐藏

1.onbeforeunload：

//在页面刷新和关闭的时候触发事件，表示正要去服务器读取新的页面时调用，此时还没开始读取。
//检测浏览器刷新
window.onbeforeunload = function() 
{	
  // return '确定需要离开页面' // 加上这个可以拦截页面关闭，return 只要有返回就可以
}

2.onunload： 

则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。

3.onload： 

当资源已加载时被触发。

注: onbrforeunload和onunload都会在刷新和关闭页面是触发，但是onbeforeunload在onunload之前执行，并且它还可以阻止onunload的执行。 

那么在页面刷新时执行顺序就是onbeforeunload、onunload、onload。
 

---

拦截浏览器返回 ：

1.popstate 

拦截浏览器返回 ：

1.当活动历史记录条目更改时，将触发popstate事件，通过popstate监听实现拦截浏览器;
2.页面载入时就使用history api插入一条历史记录，为啥要这一步呢，原因是onpopstate事件只能监听pushState插入的历史记录，而a标签跳转的链接是不受监听滴。
3.因此为了让我们能监听用户点击浏览器的回退操作or安卓的返回键，必须得加上这一步。

//页面载入时使用pushState插入一条历史记录
history.pushState(null, null, document.URL.split("?")[0] + "?rand=" + Math.random());
function popstateFn(event){
    var confrimFn=confirm('确定需要返回上一级页面')
    console.log('回退',confrimFn);
    if(confrimFn){
        //点击了确定，取消监听方法，并返回
        window.removeEventListener('popstate', popstateFn,true);
        history.back()
        setTimeout(()=>{
             window.addEventListener('popstate', popstateFn,true);
        },0)
    }else{
         // 点了了取消，回退时再向历史记录插入一条，以便阻止下一次点击回退
         history.pushState(null, null, document.URL.split("?")[0] + "?rand=" + Math.random());
    }
}
// 挂载方法
window.addEventListener('popstate', popstateFn,true);

监听用户退回操作，必须是history api添加的历史记录才能响应事件。意思是history.pushState或者history.replaceState添加的才能响应。超链接或者location.href跳转不受控制。 

2.hashchange：

 拦截浏览器返回 ：

1.当浏览器hash变化是，通过hashchange监听，判断用户返回了;
2.页面载入时就使用history api追加一个hash值。
3.因此为了让我们能监听用户点击浏览器的回退操作or安卓的返回键，必须得加上这一步。

 window.location.hash = "";
 history.pushState(null, "", window.location.href + "#aaa");

 window.addEventListener(
      "hashchange",
      function (e) {
        var re = /#aaa$/;
        console.log(e.oldURL, e.newURL);
        if (re.test(e.oldURL) && !re.test(e.newURL)) {
          console.log("hashchange 触发！");
          // 处理返回弹窗
          //history.pushState(null, null, null);
        }
      },
      false
  );

---

监听页面显示和隐藏：

1.通过visibilitychange 监听监听文档的是否可视化
2.同时查看浏览器可视化状态是什么，Document.visibilityState 可见性状态

Document.visibilityState （只读属性）, 返回document的可见性, 即当前可见元素的上下文环境. 由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签页，或者(正在)预渲染.可用的值如下：

‘visible’ : 此时页面内容至少是部分可见. 即此页面在前景标签页中，并且窗口没有最小化.

‘hidden’ : 此时页面对用户不可见. 即文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 ‘锁屏状态’ .

‘prerender’ : 页面此时正在渲染中, 因此是不可见的 (considered hidden for purposes of document.hidden). 文档只能从此状态开始，永远不能从其他值变为此状态.注意: 浏览器支持是可选的.
当此属性的值改变时, 会递交 visibilitychange (en-US) 事件给Document**

document.addEventListener('visibilitychange', () => {
            if (document.visibilityState == "visible") {
                alert('出现')
            } else {
                alert('隐藏')
            }
})

 同时，window 的pagehide 和 pageshow 也可以实现监听

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