Rileva se la scheda del browser è triggers

Esiste un modo cross-browser affidabile per rilevare che una scheda ha il focus.

Lo scenario è che abbiamo un’applicazione che esegue regolarmente il polling per i prezzi delle azioni e, se la pagina non ha il focus, potremmo interrompere il polling e salvare tutti il ​​rumore del traffico, soprattutto perché le persone sono fan dell’apertura di diverse tabs con diversi portafogli.

window.onblur e window.onfocus un’opzione per questo?

Sì, window.onfocus e window.onblur dovrebbero funzionare per il tuo scenario:

http://www.thefutureoftheweb.com/blog/detect-browser-window-focus

Importante Modifica: questa risposta è obsoleta. Dopo averlo scritto, è stata introdotta l’API Visibility ( mdn , example , spec ). È il modo migliore per risolvere questo problema.


 var focused = true; window.onfocus = function() { focused = true; }; window.onblur = function() { focused = false; }; 

AFAIK, focus e blur sono tutti supportati su … tutto. (vedi http://www.quirksmode.org/dom/events/index.html )

Durante la ricerca di questo problema, ho trovato una raccomandazione che l’ API della visibilità delle pagine dovrebbe essere utilizzata. La maggior parte dei browser moderni supporta questa API in base a Can I Use: http://caniuse.com/#feat=pagevisibility .

Ecco un esempio funzionante (derivato da questo snippet ):

 $(document).ready(function() { var hidden, visibilityState, visibilityChange; if (typeof document.hidden !== "undefined") { hidden = "hidden", visibilityChange = "visibilitychange", visibilityState = "visibilityState"; } else if (typeof document.msHidden !== "undefined") { hidden = "msHidden", visibilityChange = "msvisibilitychange", visibilityState = "msVisibilityState"; } var document_hidden = document[hidden]; document.addEventListener(visibilityChange, function() { if(document_hidden != document[hidden]) { if(document[hidden]) { // Document hidden } else { // Document shown } document_hidden = document[hidden]; } }); }); 

Aggiornamento: l’esempio precedente aveva le proprietà prefissate per i browser Gecko e WebKit, ma ho rimosso tale implementazione perché questi browser offrivano già da tempo un API di visibilità delle pagine senza un prefisso. Ho mantenuto il prefisso specifico di Microsoft per rimanere compatibile con IE10.

Sì, quelli dovrebbero funzionare per te. Mi hai appena ricordato questo link che ho trovato che sfrutta queste tecniche. lettura interessante

Sorprendente vedere nessuno ha menzionato document.hasFocus

 if (document.hasFocus()) console.log('Tab is active') 

MDN ha più informazioni.

Lo farei in questo modo (riferimento http://www.w3.org/TR/page-visibility/ ):

  window.onload = function() { // check the visiblility of the page var hidden, visibilityState, visibilityChange; if (typeof document.hidden !== "undefined") { hidden = "hidden", visibilityChange = "visibilitychange", visibilityState = "visibilityState"; } else if (typeof document.mozHidden !== "undefined") { hidden = "mozHidden", visibilityChange = "mozvisibilitychange", visibilityState = "mozVisibilityState"; } else if (typeof document.msHidden !== "undefined") { hidden = "msHidden", visibilityChange = "msvisibilitychange", visibilityState = "msVisibilityState"; } else if (typeof document.webkitHidden !== "undefined") { hidden = "webkitHidden", visibilityChange = "webkitvisibilitychange", visibilityState = "webkitVisibilityState"; } if (typeof document.addEventListener === "undefined" || typeof hidden === "undefined") { // not supported } else { document.addEventListener(visibilityChange, function() { console.log("hidden: " + document[hidden]); console.log(document[visibilityState]); switch (document[visibilityState]) { case "visible": // visible break; case "hidden": // hidden break; } }, false); } if (document[visibilityState] === "visible") { // visible } }; 

Soluzione jQuery per browser incrociato! Raw disponibile su GitHub

Divertente e facile da usare!

Il seguente plugin passerà attraverso il tuo test standard per varie versioni di IE, Chrome, Firefox, Safari, ecc. E stabilirà i tuoi metodi dichiarati di conseguenza. Si occupa anche di problemi come:

  • onblur | .blur / onfocus | .focus chiamate ” duplicate
  • finestra che perde attenzione attraverso la selezione di app alternative, come la parola
    • Questo tende ad essere indesiderabile semplicemente perché, se hai una pagina bancaria aperta, ed è un evento onblur , dice di mascherare la pagina, quindi se apri la calcolatrice, non puoi più vedere la pagina!
  • Non si triggers al caricamento della pagina

L’utilizzo è semplice come: scorri verso il basso fino a ” Esegui snippet

 $.winFocus(function(event, isVisible) { console.log("Combo\t\t", event, isVisible); }); // OR Pass False boolean, and it will not trigger on load, // Instead, it will first trigger on first blur of current tab_window $.winFocus(function(event, isVisible) { console.log("Combo\t\t", event, isVisible); }, false); // OR Establish an object having methods "blur" & "focus", and/or "blurFocus" // (yes, you can set all 3, tho blurFocus is the only one with an 'isVisible' param) $.winFocus({ blur: function(event) { console.log("Blur\t\t", event); }, focus: function(event) { console.log("Focus\t\t", event); } }); // OR First method becoms a "blur", second method becoms "focus"! $.winFocus(function(event) { console.log("Blur\t\t", event); }, function(event) { console.log("Focus\t\t", event); }); 
 /* Begin Plugin */ ;;(function($){$.winFocus||($.extend({winFocus:function(){var a=!0,b=[];$(document).data("winFocus")||$(document).data("winFocus",$.winFocus.init());for(x in arguments)"object"==typeof arguments[x]?(arguments[x].blur&&$.winFocus.methods.blur.push(arguments[x].blur),arguments[x].focus&&$.winFocus.methods.focus.push(arguments[x].focus),arguments[x].blurFocus&&$.winFocus.methods.blurFocus.push(arguments[x].blurFocus),arguments[x].initRun&&(a=arguments[x].initRun)):"function"==typeof arguments[x]?b.push(arguments[x]): "boolean"==typeof arguments[x]&&(a=arguments[x]);b&&(1==b.length?$.winFocus.methods.blurFocus.push(b[0]):($.winFocus.methods.blur.push(b[0]),$.winFocus.methods.focus.push(b[1])));if(a)$.winFocus.methods.onChange()}}),$.winFocus.init=function(){$.winFocus.props.hidden in document?document.addEventListener("visibilitychange",$.winFocus.methods.onChange):($.winFocus.props.hidden="mozHidden")in document?document.addEventListener("mozvisibilitychange",$.winFocus.methods.onChange):($.winFocus.props.hidden= "webkitHidden")in document?document.addEventListener("webkitvisibilitychange",$.winFocus.methods.onChange):($.winFocus.props.hidden="msHidden")in document?document.addEventListener("msvisibilitychange",$.winFocus.methods.onChange):($.winFocus.props.hidden="onfocusin")in document?document.onfocusin=document.onfocusout=$.winFocus.methods.onChange:window.onpageshow=window.onpagehide=window.onfocus=window.onblur=$.winFocus.methods.onChange;return $.winFocus},$.winFocus.methods={blurFocus:[],blur:[],focus:[], exeCB:function(a){$.winFocus.methods.blurFocus&&$.each($.winFocus.methods.blurFocus,function(b,c){this.apply($.winFocus,[a,!a.hidden])});a.hidden&&$.winFocus.methods.blur&&$.each($.winFocus.methods.blur,function(b,c){this.apply($.winFocus,[a])});!a.hidden&&$.winFocus.methods.focus&&$.each($.winFocus.methods.focus,function(b,c){this.apply($.winFocus,[a])})},onChange:function(a){var b={focus:!1,focusin:!1,pageshow:!1,blur:!0,focusout:!0,pagehide:!0};if(a=a||window.event)a.hidden=a.type in b?b[a.type]: document[$.winFocus.props.hidden],$(window).data("visible",!a.hidden),$.winFocus.methods.exeCB(a);else try{$.winFocus.methods.onChange.call(document,new Event("visibilitychange"))}catch(c){}}},$.winFocus.props={hidden:"hidden"})})(jQuery); /* End Plugin */ // Simple example $(function() { $.winFocus(function(event, isVisible) { $('td tbody').empty(); $.each(event, function(i) { $('td tbody').append( $('').append( $('', { text: i }), $('', { text: this.toString() }) ) ) }); if (isVisible) $("#isVisible").stop().delay(100).fadeOut('fast', function(e) { $('body').addClass('visible'); $(this).stop().text('TRUE').fadeIn('slow'); }); else { $('body').removeClass('visible'); $("#isVisible").text('FALSE'); } }); }) 
 body { background: #AAF; } table { width: 100%; } table table { border-collapse: collapse; margin: 0 auto; width: auto; } tbody > tr > th { text-align: right; } td { width: 50%; } th, td { padding: .1em .5em; } td th, td td { border: 1px solid; } .visible { background: #FFA; } 
  

See Console for Event Object Returned

Is Visible?

TRUE

Event Data { See Console for More Details }