快捷導(dǎo)航

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

更新時(shí)間：2023年11月08日 11:33:48 作者：會(huì)說法語的豬

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

visibilitychange

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

直接上代碼：

<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)閉，頁簽切換不會(huì)觸發(fā)

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

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

<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后面直接寫一個(gè)鏈接，這樣既可以跳轉(zhuǎn)又不會(huì)記錄歷史，而且還做了兼容性處理，兼容到IE6。

總結(jié)

到此這篇關(guān)于JS監(jiān)聽瀏覽器關(guān)閉、刷新及切換標(biāo)簽頁觸發(fā)事件的文章就介紹到這了,更多相關(guān)JS監(jiān)聽瀏覽器關(guān)閉刷新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: