Apakah ada cara untuk mendeteksi jika jendela browser saat ini tidak aktif?

Saya memiliki JavaScript yang melakukan aktivitas secara berkala. Ketika pengguna tidak melihat situs (yaitu, jendela atau tab tidak memiliki fokus), alangkah baiknya untuk tidak berjalan.

Apakah ada cara untuk melakukan ini menggunakan JavaScript?

Titik referensi saya: Obrolan Gmail memutar suara jika jendela yang Anda gunakan tidak aktif.

Sejak awalnya menulis jawaban ini, spesifikasi baru telah mencapai status rekomendasi berkat W3C. The Halaman Visibilitas API (di MDN ) sekarang memungkinkan kita untuk lebih akurat mendeteksi ketika halaman tersembunyi kepada pengguna.

document.addEventListener("visibilitychange", onchange);

Dukungan browser saat ini:

• Chrome 13+
• Internet Explorer 10+
• Firefox 10+
• Opera 12.10+ ^{[ baca catatan ]}

Kode berikut jatuh kembali ke metode blur / fokus yang kurang dapat diandalkan di browser yang tidak kompatibel:

(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"});
})();

onfocusindan onfocusoutyang diperlukan untuk IE 9 dan menurunkan , sementara semua yang lain memanfaatkan onfocusdan onblur, kecuali untuk iOS, yang menggunakan onpageshowdan onpagehide.

Saya akan menggunakan jQuery karena semua yang harus Anda lakukan adalah ini:

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

Atau setidaknya itu berhasil untuk saya.

Ada 3 metode khas yang digunakan untuk menentukan apakah pengguna dapat melihat halaman HTML, namun tidak ada yang bekerja dengan sempurna:

• The W3C Halaman Visibilitas API seharusnya melakukan hal ini (didukung sejak: Firefox 10, MSIE 10, Chrome 13). Namun, API ini hanya memunculkan peristiwa-peristiwa ketika tab browser sepenuhnya ditimpa (misalnya ketika pengguna berubah dari satu tab ke yang lain). API tidak memunculkan peristiwa ketika visibilitas tidak dapat ditentukan dengan akurasi 100% (misalnya Alt + Tab untuk beralih ke aplikasi lain).

• Menggunakan metode fokus / blur memberi Anda banyak kesalahan positif. Misalnya, jika pengguna menampilkan jendela yang lebih kecil di atas jendela browser, jendela browser akan kehilangan fokus ( onblurdinaikkan) tetapi pengguna masih dapat melihatnya (jadi masih perlu di-refresh). Lihat juga http://javascript.info/tutorial/focus

• Mengandalkan aktivitas pengguna (gerakan mouse, klik, ketikan kunci) memberi Anda banyak false positive juga. Pikirkan kasus yang sama seperti di atas, atau pengguna yang menonton video.

Untuk meningkatkan perilaku tidak sempurna yang dijelaskan di atas, saya menggunakan kombinasi dari 3 metode: W3C Visibility API, lalu fokus / blur dan metode aktivitas pengguna untuk mengurangi tingkat positif palsu. Ini memungkinkan untuk mengelola acara berikut:

• Mengubah tab browser ke yang lain (akurasi 100%, berkat W3C Page Visibility API)
• Halaman berpotensi disembunyikan oleh jendela lain, misalnya karena Alt + Tab (probabilitas = tidak 100% akurat)
• Perhatian pengguna berpotensi tidak terfokus pada halaman HTML (probabilitas = tidak 100% akurat)

Beginilah cara kerjanya: ketika dokumen kehilangan fokus, aktivitas pengguna (seperti gerakan mouse) pada dokumen dimonitor untuk menentukan apakah jendela terlihat atau tidak. Probabilitas visibilitas halaman berbanding terbalik dengan waktu aktivitas pengguna terakhir pada halaman: jika pengguna tidak membuat aktivitas pada dokumen untuk waktu yang lama, halaman kemungkinan besar tidak terlihat. Kode di bawah ini meniru API Visibilitas Halaman W3C: berperilaku dengan cara yang sama tetapi memiliki tingkat positif palsu yang kecil. Ini memiliki keuntungan menjadi multibrowser (diuji pada Firefox 5, Firefox 10, MSIE 9, MSIE 7, Safari 5, Chrome 9).

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

    <script>
    / **
    Mendaftarkan pawang ke acara untuk objek yang diberikan.
    @param keberatan objek yang akan memunculkan acara
    @param, ketikkan jenis acara: klik, tekan tombol, tetikus, ...
    @param fn fungsi event handler
    @param isCapturing mengatur mode acara (true = menangkap acara, false = acara menggelegak)
    @ kembali benar jika pengendali acara telah terpasang dengan benar
    * /
    function addEvent (obj, evType, fn, isCapturing) {
      if (isCapturing == null) isCapturing = false; 
      if (obj.addEventListener) {
        // Firefox
        obj.addEventListener (evType, fn, isCapturing);
        kembali benar;
      } lain jika (obj.attachEvent) {
        // MSIE
        var r = obj.attachEvent ('on' + evType, fn);
        return r;
      } lain {
        return false;
      }
    }

    // daftar ke perubahan visibilitas halaman potensial
    addEvent (dokumen, "perubahan potensivisilitas", fungsi (acara) {
      document.getElementById ("x"). innerHTML + = "potentialVisilityChange: potentialHidden =" + document.potentialHidden + ", document.potentialHiddenSince =" + document.potentialHiddenSince + "s <br>";
    });

    // daftar ke API Visibilitas Halaman W3C
    var hidden = null;
    var visibilityChange = null;
    if (typeof document.mozHidden! == "undefined") {
      hidden = "mozHidden";
      visibilityChange = "mozvisibilitychange";
    } lain jika (typeof document.msHidden! == "undefined") {
      hidden = "msHidden";
      visibilityChange = "msvisibilitychange";
    } lain jika (typeof document.webkitHidden! == "undefined") {
      hidden = "webkitHidden";
      visibilityChange = "webkitvisibilitychange";
    } lain jika (typeof document.hidden! == "disembunyikan") {
      hidden = "hidden";
      visibilityChange = "visibilitychange";
    }
    if (hidden! = null && visibilityChange! = null) {
      addEvent (dokumen, perubahan visibilitas, fungsi (acara) {
        document.getElementById ("x"). innerHTML + = visibilityChange + ":" + hidden + "=" + dokumen [tersembunyi] + "<br>";
      });
    }


    var potentialPageVisibility = {
      pageVisibilityChangeThreshold: 3 * 3600, // dalam detik
      init: function () {
        fungsi setAsNotHidden () {
          var dispatchEventRequired = document.potentialHidden;
          document.potentialHidden = false;
          document.potentialHiddenSince = 0;
          if (dispatchEventRequired) dispatchPageVisibilityChangeEvent ();
        }

        function initPotentialHiddenDetection () {
          if (! hasFocusLocal) {
            // jendela tidak memiliki fokus => periksa aktivitas pengguna di jendela
            lastActionDate = Tanggal baru ();
            if (timeoutHandler! = null) {
              clearTimeout (timeoutHandler);
            }
            timeoutHandler = setTimeout (checkPageVisibility, potentialPageVisibility.pageVisibilityChangeThreshold * 1000 + 100); // +100 ms untuk menghindari masalah pembulatan di bawah Firefox
          }
        }

        function dispatchPageVisibilityChangeEvent () {
          unifiedVisilityChangeEventDispatchAllowed = false;
          var evt = document.createEvent ("Event");
          evt.initEvent ("potentialvisilitychange", true, true);
          document.dispatchEvent (evt);
        }

        function checkPageVisibility () {
          var potentialHiddenDuration = (hasFocusLocal || lastActionDate == null? 0: Math.floor ((Tanggal baru (). getTime () - lastActionDate.getTime ()) / 1000));
                                        document.potentialHiddenSince = potentialHiddenDuration;
          if (potentialHiddenDuration> = potentialPageVisibility.pageVisibilityChangeThreshold &&! document.potentialHidden) {
            // ambang perubahan visibilitas halaman raiched => naikkan genap
            document.potentialHidden = true;
            dispatchPageVisibilityChangeEvent ();
          }
        }

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

        addEvent (dokumen, "pageshow", fungsi (acara) {
          document.getElementById ("x"). innerHTML + = "pageshow / doc: <br>";
        });
        addEvent (dokumen, "pagehide", function (event) {
          document.getElementById ("x"). innerHTML + = "pagehide / doc: <br>";
        });
        addEvent (jendela, "pageshow", fungsi (acara) {
          document.getElementById ("x"). innerHTML + = "pageshow / win: <br>"; // terangkat saat halaman pertama kali ditampilkan
        });
        addEvent (window, "pagehide", function (event) {
          document.getElementById ("x"). innerHTML + = "pagehide / win: <br>"; // tidak dibangkitkan
        });
        addEvent (dokumen, "mousemove", fungsi (acara) {
          lastActionDate = Tanggal baru ();
        });
        addEvent (dokumen, "mouseover", fungsi (acara) {
          hasMouseOver = true;
          setAsNotHidden ();
        });
        addEvent (dokumen, "mouseout", fungsi (acara) {
          hasMouseOver = false;
          initPotentialHiddenDetection ();
        });
        addEvent (window, "blur", function (event) {
          hasFocusLocal = false;
          initPotentialHiddenDetection ();
        });
        addEvent (jendela, "fokus", fungsi (acara) {
          hasFocusLocal = true;
          setAsNotHidden ();
        });
        setAsNotHidden ();
      }
    }

    potentialPageVisibility.pageVisibilityChangeThreshold = 4; // 4 detik untuk pengujian
    potentialPageVisibility.init ();
    </script>

Karena saat ini tidak ada solusi lintas-browser yang berfungsi tanpa false positive, Anda sebaiknya berpikir dua kali untuk menonaktifkan aktivitas berkala di situs web Anda.

Ada perpustakaan yang rapi tersedia di GitHub:

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

Contoh:

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

Saya telah menguji versi 1.0.1 di semua browser yang saya miliki dan dapat mengonfirmasi bahwa itu berfungsi dengan:

• IE9, IE10
• FF 26.0
• Chrome 34.0

... dan mungkin semua versi yang lebih baru.

Tidak sepenuhnya bekerja dengan:

• IE8 - selalu menunjukkan bahwa tab / jendela sedang aktif ( .now()selalu kembali trueuntuk saya)

Menggunakan: Halaman Visibilitas API

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

Bisakah saya menggunakan? http://caniuse.com/#feat=pagevisibility

Saya membuat Obrolan Komet untuk aplikasi saya, dan ketika saya menerima pesan dari pengguna lain saya menggunakan:

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

Saya mulai menggunakan jawaban wiki komunitas, tetapi menyadari bahwa itu tidak mendeteksi acara alt-tab di Chrome. Ini karena ia menggunakan sumber acara pertama yang tersedia, dan dalam hal ini adalah API visibilitas halaman, yang di Chrome tampaknya tidak melacak tab-alt.

Saya memutuskan untuk memodifikasi skrip sedikit untuk melacak semua peristiwa yang mungkin terjadi untuk perubahan fokus halaman. Inilah fungsi yang bisa Anda singgahi:

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;
};

Gunakan seperti ini:

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

Versi ini mendengarkan semua peristiwa visibilitas yang berbeda dan mengaktifkan panggilan balik jika ada dari mereka yang menyebabkan perubahan. The focuseddan unfocusedpenangan memastikan bahwa callback tidak disebut beberapa kali jika beberapa API menangkap perubahan visibilitas yang sama.

Ini sangat sulit. Tampaknya tidak ada solusi mengingat persyaratan berikut.

• Halaman ini mencakup iframe yang tidak dapat Anda kendalikan
• Anda ingin melacak perubahan status visibilitas terlepas dari perubahan yang dipicu oleh perubahan TAB (tab ctrl +) atau perubahan jendela (alt + tab)

Ini terjadi karena:

• Halaman Visibility API andal dapat memberi tahu Anda tentang perubahan tab (bahkan dengan iframe), tetapi tidak dapat memberi tahu Anda saat pengguna mengubah windows.
• Mendengarkan peristiwa blur / fokus jendela dapat mendeteksi alt + tab dan ctrl + tab, selama iframe tidak memiliki fokus.

Dengan adanya batasan ini, dimungkinkan untuk mengimplementasikan solusi yang menggabungkan - Halaman Visibilitas API - window blur / focus - document.activeElement

Itu mampu:

• 1) tab ctrl + ketika halaman induk memiliki fokus: YA
• 2) tab ctrl + ketika iframe memiliki fokus: YES
• 3) alt + tab ketika halaman induk memiliki fokus: YA
• 4) alt + tab ketika iframe memiliki fokus: NO <- gelandangan

Ketika iframe memiliki fokus, acara blur / fokus Anda tidak dipanggil sama sekali, dan laman Visibilitas API tidak akan memicu pada alt + tab.

Saya membangun di atas solusi @ AndyE dan menerapkan solusi (hampir baik) ini di sini: https://dl.dropboxusercontent.com/u/2683925/estante-components/visibility_test1.html (maaf, saya punya masalah dengan JSFiddle).

Ini juga tersedia di Github: https://github.com/qmagico/estante-components

Ini bekerja pada chrome / chromium. Jenisnya berfungsi pada firefox, kecuali ia tidak memuat konten iframe (ada ide mengapa?)

Bagaimanapun, untuk menyelesaikan masalah terakhir (4), satu-satunya cara yang dapat Anda lakukan adalah mendengarkan acara blur / fokus pada iframe. Jika Anda memiliki kontrol atas iframe, Anda dapat menggunakan API postMessage untuk melakukannya.

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

Saya masih belum menguji ini dengan cukup banyak browser. Jika Anda dapat menemukan lebih banyak info tentang tempat ini tidak berfungsi, beri tahu saya di komentar di bawah.

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/

ini bekerja untuk saya di chrome 67, firefox 67,

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

kamu bisa menggunakan:

(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);

})();

Di HTML 5 Anda juga bisa menggunakan:

• onpageshow: Script untuk dijalankan ketika jendela menjadi terlihat
• onpagehide: Script untuk dijalankan ketika jendela disembunyikan

Lihat:

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

Ini adalah adaptasi dari jawaban dari Andy E.

Ini akan melakukan tugas, mis. Menyegarkan halaman setiap 30 detik, tetapi hanya jika halaman tersebut terlihat dan fokus.

Jika visibilitas tidak dapat dideteksi, maka hanya fokus yang akan digunakan.

Jika pengguna memfokuskan halaman, maka itu akan segera diperbarui

Halaman tidak akan diperbarui lagi hingga 30 detik setelah panggilan 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);
}

Untuk solusi tanpa jQuery, periksa Visibility.js yang menyediakan informasi tentang tiga status halaman

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

dan juga pembungkus kenyamanan untuk 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();
});

Fallback untuk browser lama (IE <10; iOS <7) juga tersedia

Cara yang sedikit lebih rumit akan digunakan setInterval()untuk memeriksa posisi mouse dan membandingkannya dengan pemeriksaan terakhir. Jika mouse belum bergerak dalam waktu yang ditentukan, pengguna mungkin menganggur.

Ini memiliki keuntungan tambahan dengan memberi tahu jika pengguna menganggur, alih-alih hanya memeriksa jika jendela tidak aktif.

Seperti yang telah ditunjukkan oleh banyak orang, ini tidak selalu merupakan cara yang baik untuk memeriksa apakah pengguna atau jendela peramban menganggur, karena pengguna bahkan mungkin tidak menggunakan mouse atau menonton video, atau serupa. Saya hanya menyarankan satu cara yang mungkin untuk memeriksa idle-ness.

Untuk angular.js, berikut adalah arahan (berdasarkan jawaban yang diterima) yang akan memungkinkan controller Anda bereaksi terhadap perubahan visibilitas:

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);
                    });
                }
            }
        }
    };

});

Anda dapat menggunakannya seperti contoh ini:, di <div react-on-window-focus="refresh()">mana refresh()fungsi lingkup dalam lingkup apa pun Pengontrol berada dalam ruang lingkup.

Inilah solusi yang solid dan modern. (Pendek manis 👌🏽)

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

Ini akan mengatur pendengar untuk memicu ketika peristiwa visibilitas dipecat yang bisa menjadi fokus atau kabur.

Jika Anda ingin bertindak pada seluruh peramban blur : Seperti yang saya komentari, jika peramban kehilangan fokus, tidak ada acara yang disarankan yang diaktifkan. Ide saya adalah untuk menghitung dalam satu lingkaran dan mengatur ulang penghitung jika suatu peristiwa terjadi. Jika penghitung mencapai batas saya melakukan location.href ke halaman lain. Ini juga menyala jika Anda bekerja pada dev-tools.

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();

Ini adalah konsep yang berhasil diuji pada FF.