監(jiān)聽瀏覽器頁面切換/刷新/關閉事件

瀏覽器tab頁面切換時觸發(fā)visibilitychange事件跷敬,離開頁面時visibilityState狀態(tài)值為hidden

visibilityState:

'visible' : 此時頁面內容至少是部分可見. 即此頁面在前景標簽頁中,并且窗口沒有最小化.
'hidden' : 此時頁面對用戶不可見. 即文檔處于背景標簽頁或者窗口處于最小化狀態(tài),或者操作系統(tǒng)正處于 '鎖屏狀態(tài)' .
'prerender' : 頁面此時正在渲染中, 因此是不可見的 (considered hidden for purposes of document.hidden). 文檔只能從此狀態(tài)開始羊壹,永遠不能從其他值變?yōu)榇藸顟B(tài).注意: 瀏覽器支持是可選的.

document.addEventListener("visibilitychange", function() {
      //瀏覽器切換事件
      if (document.visibilityState == "hidden") {
        //狀態(tài)判斷
        document.title = "別離開";
      } else {
        document.title = "你來啦";
      }
});

瀏覽器刷新或者關閉頁面時,觸發(fā)onbeforeunload事件

當窗口即將被卸載(關閉)時,會觸發(fā)該事件.此時頁面文檔依然可見,且該事件的默認動作可以被取消.

window.onbeforeunload = function (e) {
  e = e || window.event;
  if (e) {
    e.returnValue = '關閉提示';
  }
  return '關閉提示';
};
用法:
// 如果是vue組件的話有序,可以在mounted中添加監(jiān)聽事件
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))

beforeunloadHandler(e) {
      // 事件
      // 如果要發(fā)送請求的話建議使用XMLHttpRequest或者Navigator.sendBeacon()
      // 使用axios發(fā)送請求跛十,服務端會相應不到
 },
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市浅浮,隨后出現的幾起案子沫浆,更是在濱河造成了極大的恐慌,老刑警劉巖滚秩,帶你破解...
    沈念sama閱讀 206,482評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件专执,死亡現場離奇詭異,居然都是意外死亡郁油,警方通過查閱死者的電腦和手機本股,發(fā)現死者居然都...
    沈念sama閱讀 88,377評論 2 382
  • 文/潘曉璐 我一進店門攀痊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人拄显,你說我怎么就攤上這事苟径。” “怎么了躬审?”我有些...
    開封第一講書人閱讀 152,762評論 0 342
  • 文/不壞的土叔 我叫張陵棘街,是天一觀的道長。 經常有香客問我承边,道長遭殉,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,273評論 1 279
  • 正文 為了忘掉前任博助,我火速辦了婚禮险污,結果婚禮上,老公的妹妹穿的比我還像新娘富岳。我一直安慰自己蛔糯,他們只是感情好,可當我...
    茶點故事閱讀 64,289評論 5 373
  • 文/花漫 我一把揭開白布窖式。 她就那樣靜靜地躺著渤闷,像睡著了一般。 火紅的嫁衣襯著肌膚如雪脖镀。 梳的紋絲不亂的頭發(fā)上飒箭,一...
    開封第一講書人閱讀 49,046評論 1 285
  • 那天,我揣著相機與錄音蜒灰,去河邊找鬼弦蹂。 笑死,一個胖子當著我的面吹牛强窖,可吹牛的內容都是我干的凸椿。 我是一名探鬼主播,決...
    沈念sama閱讀 38,351評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼翅溺,長吁一口氣:“原來是場噩夢啊……” “哼脑漫!你這毒婦竟也來了?” 一聲冷哼從身側響起咙崎,我...
    開封第一講書人閱讀 36,988評論 0 259
  • 序言:老撾萬榮一對情侶失蹤优幸,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后褪猛,有當地人在樹林里發(fā)現了一具尸體网杆,經...
    沈念sama閱讀 43,476評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 35,948評論 2 324
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了碳却。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片队秩。...
    茶點故事閱讀 38,064評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖昼浦,靈堂內的尸體忽然破棺而出馍资,到底是詐尸還是另有隱情,我是刑警寧澤关噪,帶...
    沈念sama閱讀 33,712評論 4 323
  • 正文 年R本政府宣布迷帜,位于F島的核電站,受9級特大地震影響色洞,放射性物質發(fā)生泄漏。R本人自食惡果不足惜冠胯,卻給世界環(huán)境...
    茶點故事閱讀 39,261評論 3 307
  • 文/蒙蒙 一火诸、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧荠察,春花似錦置蜀、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,264評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至焕盟,卻和暖如春秋秤,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背脚翘。 一陣腳步聲響...
    開封第一講書人閱讀 31,486評論 1 262
  • 我被黑心中介騙來泰國打工灼卢, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人来农。 一個月前我還...
    沈念sama閱讀 45,511評論 2 354
  • 正文 我出身青樓鞋真,卻偏偏與公主長得像,于是被迫代替她去往敵國和親沃于。 傳聞我的和親對象是個殘疾皇子涩咖,可洞房花燭夜當晚...
    茶點故事閱讀 42,802評論 2 345

推薦閱讀更多精彩內容