มีวิธีการตรวจสอบหรือไม่ว่าหน้าต่างเบราว์เซอร์ไม่ทำงานในขณะนี้?

ฉันมีจาวาสคริปต์ที่ทำกิจกรรมเป็นระยะ เมื่อผู้ใช้ไม่ได้ดูเว็บไซต์ (เช่นหน้าต่างหรือแท็บไม่มีโฟกัส) มันก็ดีที่จะไม่ทำงาน

มีวิธีการทำเช่นนี้โดยใช้ JavaScript?

จุดอ้างอิงของฉัน: แชทของ Gmail เล่นเสียงหากหน้าต่างที่คุณใช้ไม่ได้ทำงานอยู่

ตั้งแต่เริ่มต้นเขียนคำตอบนี้สเปคใหม่ได้ถึงสถานะการแนะนำด้วย W3C หน้า API การเปิดเผย (เมื่อMDN ) ตอนนี้ช่วยให้เราสามารถตรวจสอบได้แม่นยำมากขึ้นเมื่อเพจถูกซ่อนอยู่ให้กับผู้ใช้

document.addEventListener("visibilitychange", onchange);

การสนับสนุนเบราว์เซอร์ปัจจุบัน:

• Chrome 13+
• Internet Explorer 10+
• Firefox 10+
• Opera 12.10+ ^{[ อ่านโน้ต ]}

รหัสต่อไปนี้กลับไปสู่วิธีเบลอ / โฟกัสที่เชื่อถือได้น้อยลงในเบราว์เซอร์ที่เข้ากันไม่ได้

(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และonfocusoutจะต้องสำหรับ IE 9 และลดในขณะที่คนอื่น ๆ ทั้งหมดทำให้การใช้งานonfocusและการonblurยกเว้นสำหรับ iOS ซึ่งการใช้งานและonpageshowonpagehide

ฉันจะใช้ jQuery เพราะสิ่งที่คุณต้องทำคือ:

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

หรืออย่างน้อยก็ใช้งานได้สำหรับฉัน

มีวิธีการทั่วไป 3 วิธีที่ใช้ในการพิจารณาว่าผู้ใช้สามารถดูหน้า HTML ได้หรือไม่ แต่ไม่มีวิธีการใดที่สมบูรณ์แบบ:

• W3C หน้า API การเปิดเผยควรจะทำเช่นนี้ (ได้รับการสนับสนุนตั้งแต่: Firefox 10 MSIE 10, Chrome 13) อย่างไรก็ตาม API นี้จะเพิ่มเหตุการณ์เฉพาะเมื่อแท็บเบราว์เซอร์นั้นเต็มไปหมด (เช่นเมื่อผู้ใช้เปลี่ยนจากแท็บหนึ่งเป็นอีกแท็บหนึ่ง) API จะไม่เพิ่มเหตุการณ์เมื่อไม่สามารถระบุการมองเห็นได้ด้วยความแม่นยำ 100% (เช่น Alt + Tab เพื่อเปลี่ยนเป็นแอปพลิเคชันอื่น)

• การใช้วิธีการโฟกัส / เบลอจะให้ผลบวกที่ผิด ๆ มากมาย ตัวอย่างเช่นหากผู้ใช้แสดงหน้าต่างเล็ก ๆ ที่ด้านบนของหน้าต่างเบราว์เซอร์หน้าต่างเบราว์เซอร์จะสูญเสียการโฟกัส ( onblurยกระดับขึ้น) แต่ผู้ใช้ยังสามารถมองเห็นได้ (ดังนั้นจึงจำเป็นต้องรีเฟรช) ดูเพิ่มเติมที่http://javascript.info/tutorial/focus

• การใช้กิจกรรมของผู้ใช้ (การเลื่อนเมาส์คลิกการพิมพ์คีย์) จะให้ผลบวกที่ผิด ๆ มากมาย นึกถึงกรณีเดียวกับด้านบนหรือผู้ใช้ที่ดูวิดีโอ

เพื่อปรับปรุงพฤติกรรมที่ไม่สมบูรณ์ที่อธิบายไว้ข้างต้นฉันใช้การรวมกันของ 3 วิธี: W3C Visibility API จากนั้นทำการโฟกัส / เบลอและวิธีการใช้งานของผู้ใช้เพื่อลดอัตราบวกผิด ๆ สิ่งนี้อนุญาตให้จัดการเหตุการณ์ต่อไปนี้:

• การเปลี่ยนแท็บเบราว์เซอร์ไปเป็นอีกอันหนึ่ง (ความแม่นยำ 100% ขอบคุณ W3C Page Visibility API)
• หน้าอาจซ่อนโดยหน้าต่างอื่นเช่นเนื่องจาก Alt + Tab (probabilistic = ไม่ถูกต้อง 100%)
• ความสนใจของผู้ใช้อาจไม่ได้เน้นที่หน้า HTML (ความน่าจะเป็น = ไม่ถูกต้อง 100%)

นี่คือวิธีการทำงาน: เมื่อเอกสารสูญเสียการโฟกัสกิจกรรมของผู้ใช้ (เช่นการเลื่อนเมาส์) บนเอกสารจะถูกตรวจสอบเพื่อตรวจสอบว่าสามารถมองเห็นหน้าต่างได้หรือไม่ ความน่าจะเป็นในการเปิดเผยหน้านั้นจะแปรผกผันกับเวลาของกิจกรรมผู้ใช้ล่าสุดในหน้าเว็บ: หากผู้ใช้ไม่ได้ทำกิจกรรมบนเอกสารเป็นเวลานานหน้านั้นอาจไม่สามารถมองเห็นได้ โค้ดด้านล่างเลียนแบบ W3C Page Visibility API: มันทำงานในลักษณะเดียวกัน แต่มีอัตราบวกที่ผิดพลาดเล็กน้อย มันมีข้อดีที่จะเป็น multibrowser (ทดสอบบน Firefox 5, Firefox 10, MSIE 9, MSIE 7, Safari 5, Chrome 9)

    <div id = "x"> </div>

    <script>
    / **
    ลงทะเบียนตัวจัดการเหตุการณ์สำหรับวัตถุที่กำหนด
    @param obj วัตถุที่จะเพิ่มเหตุการณ์
    @param evType ประเภทเหตุการณ์: คลิก, ปุ่มกด, เม้าส์, ...
    @param fn ฟังก์ชันตัวจัดการเหตุการณ์
    @param isCapturing ตั้งค่าโหมดเหตุการณ์ (true = เหตุการณ์การจับภาพ, false = เหตุการณ์เดือดปุด ๆ )
    @return จริงหากตัวจัดการเหตุการณ์ได้รับการแนบอย่างถูกต้อง
    * /
    ฟังก์ชั่น addEvent (obj, evType, fn, isCapturing) {
      if (isCapturing == null) isCapturing = false; 
      if (obj.addEventListener) {
        // Firefox
        obj.addEventListener (evType, fn, isCapturing);
        กลับจริง
      } อื่น ๆ ถ้า (obj.attachEvent) {
        // MSIE
        var r = obj.attachEvent ('บน' + evType, fn);
        กลับ r;
      } อื่น {
        กลับเท็จ
      }
    }

    // ลงทะเบียนเพื่อเปลี่ยนการเปิดเผยหน้าเว็บที่เป็นไปได้
    addEvent (เอกสาร, "potentialvisilitychange", ฟังก์ชัน (เหตุการณ์) {
      document.getElementById ("x"). InnerHTML + = "potentialVisilityChange: potentialHidden =" + document.potentialHidden + ", document.potentialHiddenSince =" + document.potentialHiddenSince + "s" ";
    });

    // ลงทะเบียนกับ W3C Page Visibility API
    var hidden = null;
    var visibleChange = null;
    if (typeof document.mozHidden! == "undefined") {
      ซ่อน = "mozHidden";
      visibilityChange = "mozvisibilitychange";
    } อื่นถ้า (typeof document.msHidden! == "undefined") {
      ซ่อน = "msHidden";
      visibilityChange = "msvisibilitychange";
    } อื่นถ้า (typeof document.webkitHidden! == "ไม่ได้กำหนด") {
      ซ่อน = "webkitHidden";
      visibilityChange = "webkitvisibilitychange";
    } อื่นถ้า (typeof document.hidden! == "ซ่อน") {
      ซ่อน = "ซ่อน";
      visibilityChange = "visibilitychange";
    }
    if (hidden! = null && visibleChange! = null) {
      addEvent (เอกสาร, ทัศนวิสัยเปลี่ยน, ฟังก์ชั่น (เหตุการณ์) {
        document.getElementById ("x"). InnerHTML + = visibleChange + ":" + hidden + "=" + เอกสาร [ซ่อน] + "<br>";
      });
    }


    var potentialPageVisibility = {
      pageVisibilityChangeThreshold: 3 * 3600, // ในไม่กี่วินาที
      init: function () {
        ฟังก์ชัน setAsNotHidden () {
          var dispatchEventRequired = document.potentialHidden;
          document.potentialHidden = false;
          document.potentiallyHiddenSince = 0;
          ถ้า (dispatchEventRequired) dispatchPageVisibilityChangeEvent ();
        }

        ฟังก์ชัน initPotentiallyHiddenDetection () {
          if (! hasFocusLocal) {
            // หน้าต่างไม่มี focus => ตรวจสอบกิจกรรมของผู้ใช้ในหน้าต่าง
            lastActionDate = new Date ();
            if (timeoutHandler! = null) {
              clearTimeout (timeoutHandler);
            }
            timeoutHandler = setTimeout (checkPageVisibility, potentialPageVisibility.pageVisibilityChangeThreshold * 1000 + 100); // +100 ms เพื่อหลีกเลี่ยงปัญหาการปัดเศษภายใต้ Firefox
          }
        }

        ฟังก์ชั่น dispatchPageVisibilityChangeEvent () {
          unifiedVisilityChangeEventDispatchAllowed = false;
          var evt = document.createEvent ("เหตุการณ์");
          evt.initEvent ("potentialvisilitychange", จริง, จริง);
          document.dispatchEvent (EVT);
        }

        ฟังก์ชัน checkPageVisibility () {
          var potentialHiddenDuration = (hasFocusLocal || lastActionDate == null? 0: Math.floor ((วันที่ใหม่ (). getTime () - lastActionDate.getTime ()) / 1000);
                                        document.potentiallyHiddenSince = potentialHiddenDuration;
          if (potentialHiddenDuration> = potentialPageVisibility.pageVisibilityChangeThreshold &&! document.potentialHidden) {
            // หน้าเปลี่ยนเกณฑ์การมองเห็น raiched => ยกระดับ
            document.potentialHidden = true;
            dispatchPageVisibilityChangeEvent ();
          }
        }

        var lastActionDate = null;
        var hasFocusLocal = true;
        var hasMouseOver = true;
        document.potentialHidden = false;
        document.potentiallyHiddenSince = 0;
        var timeoutHandler = null;

        addEvent (เอกสาร, "pageshow", ฟังก์ชัน (เหตุการณ์) {
          document.getElementById ( "x") innerHTML + = "pageshow / doc: <br>".
        });
        addEvent (เอกสาร, "pagehide", ฟังก์ชัน (เหตุการณ์) {
          document.getElementById ( "x") innerHTML + = "pagehide / doc: <br>".
        });
        addEvent (หน้าต่าง "pageshow", ฟังก์ชัน (เหตุการณ์) {
          document.getElementById ( "x") innerHTML + = "pageshow / ชนะ: <br>". // เพิ่มเมื่อหน้าแรกแสดง
        });
        addEvent (หน้าต่าง "pagehide", ฟังก์ชัน (เหตุการณ์) {
          document.getElementById ( "x") innerHTML + = "pagehide / ชนะ: <br>". // ไม่ยกขึ้น
        });
        addEvent (เอกสาร "mousemove", ฟังก์ชัน (เหตุการณ์) {
          lastActionDate = new Date ();
        });
        addEvent (เอกสาร "mouseover", ฟังก์ชัน (เหตุการณ์) {
          hasMouseOver = true;
          setAsNotHidden ();
        });
        addEvent (เอกสาร "mouseout", function (event) {
          hasMouseOver = false;
          initPotentiallyHiddenDetection ();
        });
        addEvent (หน้าต่าง "เบลอ" ฟังก์ชั่น (เหตุการณ์) {
          hasFocusLocal = false;
          initPotentiallyHiddenDetection ();
        });
        addEvent (หน้าต่าง, "โฟกัส", ฟังก์ชัน (เหตุการณ์) {
          hasFocusLocal = true;
          setAsNotHidden ();
        });
        setAsNotHidden ();
      }
    }

    potentialPageVisibility.pageVisibilityChangeThreshold = 4; // 4 วินาทีสำหรับการทดสอบ
    potentialPageVisibility.init ();
    </ script>

เนื่องจากขณะนี้ยังไม่มีโซลูชันข้ามเบราว์เซอร์ที่ใช้งานได้โดยไม่มีข้อผิดพลาดในเชิงบวกคุณควรคิดให้ดีขึ้นสองครั้งเกี่ยวกับการปิดใช้งานกิจกรรมเป็นระยะ ๆ บนเว็บไซต์ของคุณ

มีห้องสมุดเรียบร้อยที่ GitHub:

https://github.com/serkanyersen/ifvisible.js

ตัวอย่าง:

// If page is visible right now
if( ifvisible.now() ){
  // Display pop-up
  openPopUp();
}

ฉันได้ทดสอบเวอร์ชัน 1.0.1 บนเบราว์เซอร์ทั้งหมดที่ฉันมีและสามารถยืนยันได้ว่าทำงานได้กับ:

• IE9, IE10
• FF 26.0
• Chrome 34.0

... และอาจเป็นเวอร์ชั่นที่ใหม่กว่าทั้งหมด

ใช้งานไม่ได้กับ:

• IE8 - ระบุว่าแท็บ / หน้าต่างนั้นทำงานอยู่.now()เสมอ( กลับมาเสมอtrueสำหรับฉัน)

การใช้: API การเปิดเผยหน้าเว็บ

document.addEventListener( 'visibilitychange' , function() {
    if (document.hidden) {
        console.log('bye');
    } else {
        console.log('well back');
    }
}, false );

ฉันสามารถใช้ ? http://caniuse.com/#feat=pagevisibility

ฉันสร้าง Comet Chat สำหรับแอปของฉันและเมื่อฉันได้รับข้อความจากผู้ใช้รายอื่นฉันใช้:

if(new_message){
    if(!document.hasFocus()){
        audio.play();
        document.title="Have new messages";
    }
    else{
        audio.stop();
        document.title="Application Name";
    } 
}

ฉันเริ่มใช้คำตอบวิกิชุมชน แต่รู้ว่ามันไม่ได้ตรวจพบเหตุการณ์แท็บ alt ใน Chrome นี่เป็นเพราะมันใช้แหล่งเหตุการณ์แรกที่มีอยู่และในกรณีนี้คือ API การเปิดเผยหน้าเว็บซึ่งใน Chrome ดูเหมือนว่าจะไม่ติดตามการแท็บ alt

ฉันตัดสินใจที่จะปรับเปลี่ยนสคริปต์เล็กน้อยเพื่อติดตามเหตุการณ์ที่เป็นไปได้ทั้งหมดสำหรับการเปลี่ยนแปลงการโฟกัสหน้า นี่คือฟังก์ชั่นที่คุณสามารถดรอปได้:

function onVisibilityChange(callback) {
    var visible = true;

    if (!callback) {
        throw new Error('no callback given');
    }

    function focused() {
        if (!visible) {
            callback(visible = true);
        }
    }

    function unfocused() {
        if (visible) {
            callback(visible = false);
        }
    }

    // Standards:
    if ('hidden' in document) {
        document.addEventListener('visibilitychange',
            function() {(document.hidden ? unfocused : focused)()});
    }
    if ('mozHidden' in document) {
        document.addEventListener('mozvisibilitychange',
            function() {(document.mozHidden ? unfocused : focused)()});
    }
    if ('webkitHidden' in document) {
        document.addEventListener('webkitvisibilitychange',
            function() {(document.webkitHidden ? unfocused : focused)()});
    }
    if ('msHidden' in document) {
        document.addEventListener('msvisibilitychange',
            function() {(document.msHidden ? unfocused : focused)()});
    }
    // IE 9 and lower:
    if ('onfocusin' in document) {
        document.onfocusin = focused;
        document.onfocusout = unfocused;
    }
    // All others:
    window.onpageshow = window.onfocus = focused;
    window.onpagehide = window.onblur = unfocused;
};

ใช้มันแบบนี้:

onVisibilityChange(function(visible) {
    console.log('the page is now', visible ? 'focused' : 'unfocused');
});

รุ่นนี้ฟังสำหรับทุกเหตุการณ์ที่เกิดขึ้นในการมองเห็นที่แตกต่างกันและไฟโทรกลับถ้าใด ๆ ของพวกเขาทำให้เกิดการเปลี่ยนแปลง ตัวจัดการfocusedและunfocusedตรวจสอบให้แน่ใจว่าการเรียกกลับไม่ได้ถูกเรียกหลายครั้งถ้า API หลายตัวเปลี่ยนแปลงการมองเห็นที่เหมือนกัน

นี่มันช่างยากจริงๆ ดูเหมือนจะไม่มีวิธีแก้ปัญหาตามข้อกำหนดดังต่อไปนี้

• หน้านี้ประกอบด้วย iframes ที่คุณไม่สามารถควบคุมได้
• คุณต้องการติดตามการเปลี่ยนแปลงสถานะการมองเห็นโดยไม่คำนึงถึงการเปลี่ยนแปลงที่เกิดขึ้นจากการเปลี่ยนแปลง TAB (แท็บ ctrl +) หรือการเปลี่ยนแปลงหน้าต่าง (แท็บ alt +)

สิ่งนี้เกิดขึ้นเพราะ:

• API การมองเห็นของหน้าสามารถบอกคุณได้อย่างน่าเชื่อถือถึงการเปลี่ยนแปลงแท็บ (แม้จะมี iframe) แต่ก็ไม่สามารถบอกคุณได้เมื่อผู้ใช้เปลี่ยนหน้าต่าง
• การฟังเหตุการณ์หน้าต่างเบลอ / โฟกัสสามารถตรวจจับ alt + tab และ ctrl + tab ได้ตราบใดที่ iframe ไม่มีโฟกัส

ด้วยข้อ จำกัด เหล่านี้จึงเป็นไปได้ที่จะใช้โซลูชันที่รวม - API การมองเห็นหน้า - การเบลอของหน้าต่าง / โฟกัส - document.activeElement

ที่สามารถ:

• 1) แท็บ ctrl + เมื่อเพจระดับบนมีโฟกัส: ใช่
• 2) แท็บ ctrl + เมื่อ iframe มีโฟกัส: ใช่
• 3) แท็บ alt + เมื่อเพจระดับบนมีโฟกัส: ใช่
• 4) alt + tab เมื่อ iframe มีโฟกัส: NO <- คนเกียจคร้าน

เมื่อ iframe มีโฟกัสเหตุการณ์เบลอ / โฟกัสของคุณจะไม่ถูกเรียกใช้เลยและ API การมองเห็นหน้าเว็บจะไม่เรียกใช้แท็บ alt +

ฉันสร้างโซลูชันของ @ AndyE และใช้โซลูชัน (เกือบดี) ที่นี่: https://dl.dropboxusercontent.com/u/2683925/estante-components/visibility_test1.html (ขออภัยฉันมีปัญหากับ JSFiddle)

นอกจากนี้ยังมีให้ที่ Github: https://github.com/qmagico/estante-components

ใช้ได้กับโครเมียม / โครเมียม มันใช้งานได้กับ firefox ยกเว้นว่าจะไม่โหลดเนื้อหา iframe (คิดว่าเพราะอะไร)

อย่างไรก็ตามเพื่อแก้ไขปัญหาล่าสุด (4) วิธีเดียวที่คุณสามารถทำได้คือฟังเหตุการณ์เบลอ / โฟกัสบน iframe หากคุณมีสิทธิ์ควบคุม iframes คุณสามารถใช้ postMessage API เพื่อทำสิ่งนั้น

https://dl.dropboxusercontent.com/u/2683925/estante-components/visibility_test2.html

ฉันยังไม่ได้ทดสอบกับเบราว์เซอร์เพียงพอ หากคุณสามารถหาข้อมูลเพิ่มเติมเกี่ยวกับสถานที่ที่ใช้งานไม่ได้โปรดแจ้งให้เราทราบในความคิดเห็นด้านล่าง

var visibilityChange = (function (window) {
    var inView = false;
    return function (fn) {
        window.onfocus = window.onblur = window.onpageshow = window.onpagehide = function (e) {
            if ({focus:1, pageshow:1}[e.type]) {
                if (inView) return;
                fn("visible");
                inView = true;
            } else if (inView) {
                fn("hidden");
                inView = false;
            }
        };
    };
}(this));

visibilityChange(function (state) {
    console.log(state);
});

http://jsfiddle.net/ARTsinn/JTxQY/

สิ่งนี้ใช้ได้กับฉันใน chrome 67, firefox 67,

if(!document.hasFocus()) {
    // do stuff
}

คุณสามารถใช้:

(function () {

    var requiredResolution = 10; // ms
    var checkInterval = 1000; // ms
    var tolerance = 20; // percent


    var counter = 0;
    var expected = checkInterval / requiredResolution;
    //console.log('expected:', expected);

    window.setInterval(function () {
        counter++;
    }, requiredResolution);

    window.setInterval(function () {
        var deviation = 100 * Math.abs(1 - counter / expected);
        // console.log('is:', counter, '(off by', deviation , '%)');
        if (deviation > tolerance) {
            console.warn('Timer resolution not sufficient!');
        }
        counter = 0;
    }, checkInterval);

})();

ใน HTML 5 คุณสามารถใช้:

• onpageshow: สคริปต์ที่จะทำงานเมื่อหน้าต่างมองเห็นได้
• onpagehide: สคริปต์ที่จะทำงานเมื่อซ่อนหน้าต่าง

ดู:

• https://developer.mozilla.org/en-US/docs/Web/Events/pageshow
• https://developer.mozilla.org/en-US/docs/Web/Events/pagehide

นี่คือการปรับคำตอบจาก Andy E.

สิ่งนี้จะทำงานเช่นรีเฟรชหน้าทุก ๆ 30 วินาที แต่ก็ต่อเมื่อหน้านั้นสามารถมองเห็นและโฟกัสได้

หากไม่สามารถมองเห็นทัศนวิสัยได้จะใช้เฉพาะการโฟกัสเท่านั้น

หากผู้ใช้มุ่งเน้นหน้าแล้วมันจะอัปเดตทันที

หน้าจะไม่อัปเดตอีกครั้งจนถึง 30 วินาทีหลังจากมีการโทร ajax

var windowFocused = true;
var timeOut2 = null;

$(function(){
  $.ajaxSetup ({
    cache: false
  });
  $("#content").ajaxComplete(function(event,request, settings){
       set_refresh_page(); // ajax call has just been made, so page doesn't need updating again for 30 seconds
   });
  // check visibility and focus of window, so as not to keep updating unnecessarily
  (function() {
      var hidden, change, vis = {
              hidden: "visibilitychange",
              mozHidden: "mozvisibilitychange",
              webkitHidden: "webkitvisibilitychange",
              msHidden: "msvisibilitychange",
              oHidden: "ovisibilitychange" /* not currently supported */
          };
      for (hidden in vis) {
          if (vis.hasOwnProperty(hidden) && hidden in document) {
              change = vis[hidden];
              break;
          }
      }
      document.body.className="visible";
      if (change){     // this will check the tab visibility instead of window focus
          document.addEventListener(change, onchange,false);
      }

      if(navigator.appName == "Microsoft Internet Explorer")
         window.onfocus = document.onfocusin = document.onfocusout = onchangeFocus
      else
         window.onfocus = window.onblur = onchangeFocus;

      function onchangeFocus(evt){
        evt = evt || window.event;
        if (evt.type == "focus" || evt.type == "focusin"){
          windowFocused=true; 
        }
        else if (evt.type == "blur" || evt.type == "focusout"){
          windowFocused=false;
        }
        if (evt.type == "focus"){
          update_page();  // only update using window.onfocus, because document.onfocusin can trigger on every click
        }

      }

      function onchange () {
        document.body.className = this[hidden] ? "hidden" : "visible";
        update_page();
      }

      function update_page(){
        if(windowFocused&&(document.body.className=="visible")){
          set_refresh_page(1000);
        }
      }


  })();
  set_refresh_page();
})

function get_date_time_string(){
  var d = new Date();
  var dT = [];
  dT.push(d.getDate());
  dT.push(d.getMonth())
  dT.push(d.getFullYear());
  dT.push(d.getHours());
  dT.push(d.getMinutes());
  dT.push(d.getSeconds());
  dT.push(d.getMilliseconds());
  return dT.join('_');
}

function do_refresh_page(){

// do tasks here

// e.g. some ajax call to update part of the page.

// (date time parameter will probably force the server not to cache)

//      $.ajax({
//        type: "POST",
//        url: "someUrl.php",
//        data: "t=" + get_date_time_string()+"&task=update",
//        success: function(html){
//          $('#content').html(html);
//        }
//      });

}

function set_refresh_page(interval){
  interval = typeof interval !== 'undefined' ? interval : 30000; // default time = 30 seconds
  if(timeOut2 != null) clearTimeout(timeOut2);
  timeOut2 = setTimeout(function(){
    if((document.body.className=="visible")&&windowFocused){
      do_refresh_page();
    }
    set_refresh_page();
  }, interval);
}

สำหรับโซลูชันที่ไม่มี jQuery ให้ตรวจสอบVisibility.jsซึ่งให้ข้อมูลเกี่ยวกับสถานะหน้าสามหน้า

visible    ... page is visible
hidden     ... page is not visible
prerender  ... page is being prerendered by the browser

และตัวห่อหุ้มสิ่งอำนวยความสะดวกสำหรับ setInterval

/* Perform action every second if visible */
Visibility.every(1000, function () {
    action();
});

/* Perform action every second if visible, every 60 sec if not visible */
Visibility.every(1000, 60*1000, function () {
    action();
});

ทางเลือกสำหรับเบราว์เซอร์รุ่นเก่า (IE <10; iOS <7) ก็มีให้เช่นกัน

วิธีที่ซับซ้อนกว่านี้เล็กน้อยคือใช้setInterval()เพื่อตรวจสอบตำแหน่งของเมาส์และเปรียบเทียบกับการตรวจสอบครั้งล่าสุด หากเมาส์ไม่ได้เคลื่อนที่ตามระยะเวลาที่กำหนดผู้ใช้อาจไม่ได้ทำงาน

นี้มีประโยชน์เพิ่มของการบอกหากผู้ใช้ไม่ได้ใช้งานแทนการเพียงแค่การตรวจสอบถ้าหน้าต่างไม่ได้ใช้งาน

ดังที่หลายคนชี้ว่านี่ไม่ใช่วิธีที่ดีในการตรวจสอบว่าผู้ใช้หรือหน้าต่างเบราว์เซอร์ไม่ได้ทำงานเนื่องจากผู้ใช้อาจไม่ได้ใช้เมาส์หรือดูวิดีโอหรือคล้ายกัน ฉันขอแนะนำวิธีหนึ่งที่เป็นไปได้ในการตรวจสอบความว่าง

สำหรับ angular.js ต่อไปนี้เป็นคำสั่ง (ตามคำตอบที่ยอมรับ) ซึ่งจะทำให้คอนโทรลเลอร์ของคุณตอบสนองต่อการเปลี่ยนแปลงในการมองเห็น:

myApp.directive('reactOnWindowFocus', function($parse) {
    return {
        restrict: "A",
        link: function(scope, element, attrs) {
            var hidden = "hidden";
            var currentlyVisible = true;
            var functionOrExpression = $parse(attrs.reactOnWindowFocus);

          // 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);
          else if ("onfocusin" in document) {
                // IE 9 and lower:
            document.onfocusin = onshow;
                document.onfocusout = onhide;
          } else {
                // All others:
            window.onpageshow = window.onfocus = onshow;
                window.onpagehide = window.onblur = onhide;
            }

          function onchange (evt) {
                //occurs both on leaving and on returning
                currentlyVisible = !currentlyVisible;
                doSomethingIfAppropriate();
          }

            function onshow(evt) {
                //for older browsers
                currentlyVisible = true;
                doSomethingIfAppropriate();
            }

            function onhide(evt) {
                //for older browsers
                currentlyVisible = false;
                doSomethingIfAppropriate();
            }

            function doSomethingIfAppropriate() {
                if (currentlyVisible) {
                    //trigger angular digest cycle in this scope
                    scope.$apply(function() {
                        functionOrExpression(scope);
                    });
                }
            }
        }
    };

});

คุณสามารถใช้มันเหมือนกับตัวอย่างนี้: <div react-on-window-focus="refresh()">โดยที่refresh()ฟังก์ชันขอบเขตในขอบเขตของตัวควบคุมใดก็ตามที่อยู่ในขอบเขต

นี่คือทางออกที่มั่นคงและทันสมัย (สั้นหวาน👌🏽)

document.addEventListener("visibilitychange", () => {
  console.log( document.hasFocus() )
})

การทำเช่นนี้จะเป็นการตั้งค่าให้ผู้ฟังเริ่มทำงานเมื่อมีเหตุการณ์การมองเห็นเกิดขึ้นซึ่งอาจเป็นจุดโฟกัสหรือเบลอ

หากคุณต้องการที่จะทำหน้าที่ในทั้งเบลอเบราว์เซอร์ : ขณะที่ผมให้ความเห็นว่าถ้าไม่มีเบราว์เซอร์มุ่งเน้นการสูญเสียในเหตุการณ์ไฟไหม้ปัญหา ความคิดของฉันคือการนับในลูปและรีเซ็ตตัวนับหากเหตุการณ์เริ่มทำงาน หากตัวนับถึงขีด จำกัด ฉันจะทำที่อยู่ให้คลิกไปยังหน้าอื่น สิ่งนี้จะเกิดขึ้นหากคุณทำงานกับเครื่องมือพัฒนา

var iput=document.getElementById("hiddenInput");
   ,count=1
   ;
function check(){
         count++;
         if(count%2===0){
           iput.focus();
         }
         else{
           iput.blur();
         }
         iput.value=count;  
         if(count>3){
           location.href="http://Nirwana.com";
         }              
         setTimeout(function(){check()},1000);
}   
iput.onblur=function(){count=1}
iput.onfocus=function(){count=1}
check();

นี่เป็นร่างที่ผ่านการทดสอบกับ FF เรียบร้อยแล้ว