快捷導(dǎo)航

JS監(jiān)聽瀏覽器關(guān)閉、刷新及切換標簽頁觸發(fā)事件代碼示例

更新時間：2023年11月08日 11:33:48 作者：會說法語的豬

瀏覽器是客戶端,客戶端的操作服務(wù)器是監(jiān)聽不到的,所以可以用js來監(jiān)聽,js代碼監(jiān)聽瀏覽器關(guān)閉或者刷新,這篇文章主要給大家介紹了關(guān)于JS監(jiān)聽瀏覽器關(guān)閉、刷新及切換標簽頁觸發(fā)事件的相關(guān)資料,需要的朋友可以參考下

visibilitychange

visibilitychange可以監(jiān)聽到瀏覽器的切換標簽頁。

直接上代碼：

<script>
  document.addEventListener('visibilitychange', documentVisibilityChange)

  function documentVisibilityChange() {
    if(document.visibilityState === "hidden") {
      console.log('當(dāng)前頁簽隱藏，即打開新頁簽')
    }
    if(document.visibilityState === "visible") {
      console.log('當(dāng)前頁簽顯示，即打開當(dāng)前頁簽')
    }
  }
</script>

beforeunload

beforeunload可以監(jiān)聽到頁面的關(guān)閉，頁簽切換不會觸發(fā)

關(guān)閉瀏覽器窗口的時候觸發(fā)
通過點擊當(dāng)前地址欄或收藏夾進入另一個頁面時觸發(fā)（注意不是打開新頁簽）
刷新瀏覽器時觸發(fā)
重新賦值window.location.href的值的時候觸發(fā)
通過 form input type="submit"按鈕提交一個具有指定action的表單的時候觸發(fā)（原生事件）

可能還有其他情況，大家感興趣可以再去了解一下，我只是在瀏覽器刷新時用到了

<script>
  window.addEventListener('beforeunload', windowBeforeUnload)

  function windowBeforeUnload() {
    console.log('觸發(fā)beforeunload --->>>')
  }
</script>

附：頁面鏈接跳轉(zhuǎn)不記錄歷史

function fnUrlReplace(href) {
    if (href && /^#|javasc/.test(href) === false) {
        if (history.replaceState) {
            history.replaceState(null, document.title, href.split('#')[0] + '#');
            location.replace('');
        } else {
            location.replace(href);
        }
    }
};

fnUrlReplace(targetURL);
fnUrlReplace后面直接寫一個鏈接，這樣既可以跳轉(zhuǎn)又不會記錄歷史，而且還做了兼容性處理，兼容到IE6。