JS监听浏览器关闭、刷新及切换标签页触发事件

蛮简单的东西，知道就会，不知道就不会，没什么逻辑可言。简单记录一下，只为加深点儿印象。

visibilitychange

visibilitychange可以监听到浏览器的切换标签页。 

直接上代码： 

<script>
  document.addEventListener('visibilitychange', documentVisibilityChange)
 
  function documentVisibilityChange() {
    if(document.visibilityState === "hidden") {
      console.log('当前页签隐藏，即打开新页签')
    }
    if(document.visibilityState === "visible") {
      console.log('当前页签显示，即打开当前页签')
    }
  }
</script>复制

beforeunload 

beforeunload可以监听到页面的关闭，页签切换不会触发

• 关闭浏览器窗口的时候触发
• 通过点击当前地址栏或收藏夹进入另一个页面时触发（注意不是打开新页签）
• 刷新浏览器时触发
• 重新赋值window.location.href的值的时候触发
• 通过 form input type="submit"按钮提交一个具有指定action的表单的时候触发（原生事件）

可能还有其他情况，大家感兴趣可以再去了解一下，我只是在浏览器刷新时用到了 

<script>
  window.addEventListener('beforeunload', windowBeforeUnload)
 
  function windowBeforeUnload() {
    console.log('触发beforeunload --->>>')
  }
</script>复制