亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

有沒有辦法檢測瀏覽器窗口當前是否處于活動狀態?

有沒有辦法檢測瀏覽器窗口當前是否處于活動狀態?

有沒有辦法檢測瀏覽器窗口當前是否處于活動狀態?我有定期執行活動的JavaScript。當用戶沒有看到該站點時(即窗口或選項卡沒有焦點),最好不要運行。有沒有辦法使用JavaScript?我的參考點:如果您使用的窗口未處于活動狀態,則Gmail聊天會播放聲音。
查看完整描述

4 回答

?
千萬里不及你

TA貢獻1784條經驗 獲得超9個贊

自從最初撰寫此答案以來,由于W3C ,新規范已達到推薦狀態。在網頁瀏覽權限API(在MDN)現在允許當一個頁面被隱藏到用戶我們更準確地檢測。

目前的瀏覽器支持

  • Chrome 13+

  • Internet Explorer 10+

  • Firefox 10+

  • Opera 12.10+ 閱讀筆記 ]

以下代碼使用API,回退到不兼容的瀏覽器中不太可靠的模糊/焦點方法。

(function() {
  var hidden = "hidden";

  // Standards:
  if (hidden in document)
    document.addEventListener("visibilitychange", onchange);
  else if ((hidden = "mozHidden") in document)
    document.addEventListener("mozvisibilitychange", onchange);
  else if ((hidden = "webkitHidden") in document)
    document.addEventListener("webkitvisibilitychange", onchange);
  else if ((hidden = "msHidden") in document)
    document.addEventListener("msvisibilitychange", onchange);
  // IE 9 and lower:
  else if ("onfocusin" in document)
    document.onfocusin = document.onfocusout = onchange;
  // All others:
  else
    window.onpageshow = window.onpagehide    = window.onfocus = window.onblur = onchange;

  function onchange (evt) {
    var v = "visible", h = "hidden",
        evtMap = {
          focus:v, focusin:v, pageshow:v, blur:h, focusout:h, pagehide:h        };

    evt = evt || window.event;
    if (evt.type in evtMap)
      document.body.className = evtMap[evt.type];
    else
      document.body.className = this[hidden] ? "hidden" : "visible";
  }

  // set the initial state (but only if browser supports the Page Visibility API)
  if( document[hidden] !== undefined )
    onchange({type: document[hidden] ? "blur" : "focus"});})();

onfocusin并且onfocusoutIE 9及更低版本必需的,而所有其他人都使用onfocusonblur使用onpageshow和的iOS除外onpagehide


查看完整回答
反對 回復 2019-05-27
?
絕地無雙

TA貢獻1946條經驗 獲得超4個贊

我會使用jQuery因為那樣你所要做的就是:

$(window).blur(function(){
  //your code here});$(window).focus(function(){
  //your code});

或者至少它對我有用。


查看完整回答
反對 回復 2019-05-27
  • 4 回答
  • 0 關注
  • 2545 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號