usar - popup focus javascript

Detectar si la pestaña del navegador tiene foco

Question

¿Existe una forma confiable de navegador cruzado para detectar que una pestaña tiene foco?

El escenario es que tenemos una aplicación que sondea regularmente los precios de las acciones, y si la página no tiene foco podríamos detener el sondeo y salvar a todos el ruido del tráfico, especialmente porque las personas son fanáticas de abrir varias pestañas con diferentes carteras.

¿ window.onblur y window.onfocus una opción para esto?

Answer 1

Cross Browser jQuery Solution! _{Raw disponible en GitHub}

¡Divertido y fácil de usar!

El siguiente complemento pasará por su prueba estándar para varias versiones de IE, Chrome, Firefox, Safari, etc. y establecerá sus métodos declarados en consecuencia. También se ocupa de cuestiones tales como:

• onblur | .blur / onfocus | .focus llamadas " duplicadas "
• ventana que pierde el foco a través de la selección de la aplicación alternativa, como la palabra
• • Esto tiende a ser indeseable simplemente porque, si tiene una página de banco abierta y su evento onblur le dice que enmascare la página, entonces, si abre la calculadora, ¡ya no podrá ver la página!
• No se activa en la carga de la página

El uso es tan simple como: _{Desplácese hacia abajo para '' Ejecutar fragmento ''}

$.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(
    $(''<tr />'').append(
     $(''<th />'', { text: i }),
     $(''<td />'', { 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; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3>See Console for Event Object Returned</h3>
<table>
    <tr>
        <th><p>Is Visible?</p></th>
        <td><p id="isVisible">TRUE</p></td>
    </tr>
    <tr>
        <td colspan="2">
            <table>
                <thead>
                    <tr>
                        <th colspan="2">Event Data <span style="font-size: .8em;">{ See Console for More Details }</span></th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </td>
    </tr>
</table>

Answer 2

Lo haría de esta manera (Referencia spec ):

    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
        }

    };  

Answer 3

Mientras buscaba sobre este problema, encontré una recomendación para que se utilizara spec . La mayoría de los navegadores modernos admiten esta API de acuerdo con Can I Use: http://caniuse.com/#feat=pagevisibility .

Aquí hay un ejemplo de trabajo (derivado de este fragmento ):

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

Actualización: el ejemplo anterior solía tener propiedades prefijadas para los navegadores Gecko y WebKit, pero eliminé esa implementación porque estos navegadores han ofrecido la API Visibilidad de página sin un prefijo por un tiempo. Mantuve el prefijo específico de Microsoft para seguir siendo compatible con IE10.

Answer 4

Sí, window.onfocus y window.onblur deberían funcionar para su escenario:

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

Answer 5

Sí, esos deberían funcionar para usted. Me acabas de recordar de este enlace que encontré que explota esas técnicas. lecturA INTERESANTE

Answer 6

Sorprende ver que nadie mencionó document.hasFocus

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

MDN tiene más información.

Answer 7

Edición importante: esta respuesta no está actualizada. Desde que se escribió, se ha introducido la API de visibilidad ( mdn , example , spec ). Es la mejor manera de resolver este problema.

var focused = true;

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

AFAIK, focus y blur son compatibles con ... todo. (ver http://www.quirksmode.org/dom/events/index.html )