Come verificare se il browser ha la messa a fuoco in JavaScript

November 4

Come verificare se il browser ha la messa a fuoco in JavaScript


Sempre più le pagine Web hanno deciso di incorporare funzioni JavaScript che girano in loop a intervalli regolari, sia per il ping di un URL per gli aggiornamenti o per fornire una maggiore interattività dell'utente con la pagina. Purtroppo, JavaScript consuma le risorse della macchina del cliente, tra cui unità centrale di elaborazione utilizzo, memoria e larghezza di banda.

Con questo in mente, è considerato buona pratica per i programmatori di non tassare tali risorse quando l'utente non dispone di bisogno di loro. Un modo per farlo è quello di verificare se il browser (o una scheda specifica all'interno del browser) è attiva, e abilitare / disabilitare le funzioni di conseguenza.

istruzione

1 Creare due funzioni, una per quando il browser è a fuoco, e uno per quando la sua attenzione è sfocata:

var onFocus = function () {

// insert code to run when the window has gained focus.

};

var onBlur = function () {

// insert code to run when the window has lost focus.

};

2 Incorporare il rilevamento caratteristica. Questo è principalmente per Internet Explorer, ma è meglio usare il rilevamento funzione invece di rilevamento del browser perché è più affidabile per verificare direttamente per la funzione che si desidera modificare. Internet Explorer utilizza il document.onfocusin proprietà e document.onfocusout piuttosto che window.onfocus e window.onbur, quindi sarà necessario verificare se tali proprietà del documento sono definite:

if (document.onfocusin! == undefined) {

var onfocusin = true;

} altro {

var onfocusin = false;

}

3 Completare il codice legando le opportune manifestazioni Focus / sfocatura alle funzioni create nella fase 1:

if (onfocusin === true) {

document.onfocusin = onFocus;

document.onfocusout = onBlur;

} altro {

window.onfocus = onFocus;

window.onblur = onBlur;

}

Consigli e avvertenze

  • Ricordatevi di controllare il codice in tutti i browser che il sito supporta, mette in tensione. Il codice in questo articolo è stato testato in Firefox 3.6.6, IE 7, IE 8, Chrome 6.0, Safari 5.0 e Opera 10.53.