Hvordan sjekke om nettleseren er i fokus i Javascript

Flere og flere nettsider er å innlemme Javascript-funksjoner som kjører i sløyfer med jevne mellomrom, enten for å pinge en URL for oppdateringer eller å gi større bruker interaktivitet med siden. Dessverre bruker Javascript ressursene i kundens maskin, inkludert sentralenhet bruk, minne og båndbredde.

Med det i tankene, er det ansett som god praksis for programmerere å ikke beskatte disse ressursene når brukeren ikke har behov for dem. En måte å gjøre det på er å sjekke om nettleseren (eller en bestemt fane i nettleseren) har fokus, og aktivere / deaktivere funksjoner tilsvarende.

Bruksanvisning

1 Lag to funksjoner, en for når nettleseren er i fokus, og en for når fokus er uskarpt:

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 Innlemme funksjonen gjenkjenning. Dette er først og fremst for Internet Explorer, men det er best å bruke funksjonen deteksjon fremfor nettleser gjenkjenning fordi det er mer pålitelig å direkte teste for funksjonen du ønsker å manipulere. Internet Explorer bruker eiendommen document.onfocusin og document.onfocusout snarere enn window.onfocus og window.onbur, så du må sjekke for å se om disse dokumentegenskaper er definert:

if (document.onfocusin! == udefinert) {

var onfocusin = true;

} Else {

var onfocusin = false;

}

3 Fullfør koden ved å binde de riktige fokus / uskarpe hendelser til funksjoner som er opprettet i trinn 1:

if (onfocusin === true) {

document.onfocusin = onFocus;

document.onfocusout = onBlur;

} Else {

window.onfocus = onFocus;

window.onblur = onBlur;

}

Hint

• Husk å sjekke koden i alle nettlesere at nettstedet støtter før du tar den live. Koden i denne artikkelen har blitt testet i Firefox 3.6.6, IE 7, IE 8, Chrome 6.0, Safari 5.0 og Opera 10.53.