1.onbeforeunload：
//在页面刷新和关闭的时候触发事件，表示正要去服务器读取新的页面时调用，此时还没开始读取。//检测浏览器刷新window.onbeforeunload = function() {// return '确定需要离开页面' // 加上这个可以拦截页面关闭，return 只要有返回就可以}
2.onunload：
则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。
3.onload：
当资源已加载时被触发。
注: onbrforeunload和onunload都会在刷新和关闭页面是触发，但是onbeforeunload在onunload之前执行，并且它还可以阻止onunload的执行。
那么在页面刷新时执行顺序就是onbeforeunload、onunload、onload。
拦截浏览器返回 ：
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跳转不受控制。
监听页面显示和隐藏：
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('显示')})
