जावास्क्रिप्ट / jQuery: परीक्षण अगर खिड़की पर ध्यान केंद्रित किया है

Question

यदि आप ब्राउज़र पर ध्यान केंद्रित करते हैं तो आप कैसे परीक्षण करेंगे?

Comments

यह भी देखें stackoverflow.com/questions/483741/... जो साथ ही इस सवाल का जवाब कर सकते हैं।

— अलेक्जेंडर बर्ड

कोशिश करें document.hasFocus(), जो एक बूलियन देता है। यह कल्पना में बनाया गया है, इसलिए इसे jQuery के बिना किया जा सकता है।

— ब्रैडेन बेस्ट

जो लोग पृष्ठों की दृश्यता (जो ध्यान के समान नहीं है) की जांच करना चाहते हैं , कृपया अधिक विवरण के लिए पृष्ठ दृश्यता API की जांच करें।

— tsh

Answer 1

मैंने अन्य ब्राउज़रों में इसका परीक्षण नहीं किया है, लेकिन यह वेबकिट में काम करने लगता है। मैं तुम्हें IE की कोशिश करूँगा। :)

इसे आज़माएं: http://jsfiddle.net/ScKbk/

अंतराल शुरू करने के लिए क्लिक करने के बाद, परिणाम बदलने के लिए ब्राउज़र विंडो का फ़ोकस बदलें। फिर, केवल वेबकिट में परीक्षण किया गया।

var window_focus;

$(window).focus(function() {
    window_focus = true;
}).blur(function() {
    window_focus = false;
});

$(document).one('click', function() {
    setInterval(function() {
        $('body').append('has focus? ' + window_focus + '<br>');
    }, 1000);
});​

Comments

@jball - IE होना चाहिए? वेबकिट और फ़ायरफ़ॉक्स में विंडो का कोई भी एक्टिवेशन फोकस को ट्रिगर करता है। मुझे आश्चर्य है कि अगर वहाँ IE के लिए एक वैकल्पिक हल है। इसके अलावा, क्या आपने अपने पृष्ठ पर परीक्षण किया है? शायद वहाँ एक मुद्दा है क्योंकि jsFiddle फ्रेम का उपयोग करता है?

— user113716

वास्तव में क्रोम। आगे के परीक्षण के बाद, मेरी पहली टिप्पणी गलत हो सकती है - टैब कुंजी को तोड़ना अधिक सुसंगत प्रतीत होता है।

— 9

@jball - मैं अनुमान लगा रहा हूं कि टैब कुंजी इसे तोड़ देती है क्योंकि jsFiddle के पास अन्य फ़्रेमों में बहुत सारे इनपुट तत्व हैं। फ़्रेम से छुटकारा पाएं, और मैं शर्त लगाता हूं कि यह आपके लिए थोड़ा बेहतर काम करेगा।

— user113716

मेरा मानना ​​है कि प्रत्येक फ्रेम की अपनी windowवस्तु होती है, इसलिए यदि आप फ़्रेम का उपयोग करते हैं, तो आपको संभवतः प्रत्येक में स्क्रिप्ट को शामिल करने की आवश्यकता होगी।

— user113716

window.topसबसे ऊपरी खिड़की की जांच करने के लिए उपयोग करें ।

— मैरटेन विकस्ट्रॉम

Answer 2

डॉक्यूमेंट की हैफोकस विधि का उपयोग करें। आप यहाँ विस्तृत विवरण और एक उदाहरण पा सकते हैं: हैफोकस विधि

संपादित करें: जोड़ा गया फिडल http://jsfiddle.net/Msjyv/3/

एचटीएमएल

Currently <b id="status">without</b> focus...

जे एस

function check()
{
    if(document.hasFocus() == lastFocusStatus) return;

    lastFocusStatus = !lastFocusStatus;
    statusEl.innerText = lastFocusStatus ? 'with' : 'without';
}

window.statusEl = document.getElementById('status');
window.lastFocusStatus = document.hasFocus();

check();
setInterval(check, 200);

Comments

मैंने उपरोक्त लिंक से उदाहरण की कोशिश की और यह IE7 +, क्रोम, और FF4 में अच्छी तरह से काम किया। आपके लिए +1।

— जोसेफ वासना

मेरे द्वारा चलाए गए अन्य jQuery समकक्षों की तुलना में बहुत कम फ़ंक्शन, बहुत बेहतर काम करता है।

— हीथ

स्वीकृत उत्तर की तुलना में अधिक उपयोगी, मुझे टाइमर लोडिंग की समस्या थी जबकि खिड़की फोकस से बाहर थी।

— कोकोस

यह ओपेरा द्वारा समर्थित नहीं है। शांत करने वाला तथ्य यह है कि वे प्रतिपादन इंजन को वेबकिट पर स्विच करने की प्रक्रिया में हैं :)

— निकोला पेटकंस्की

इस बीच आप ओपेरा में कार्यक्षमता प्राप्त करने के लिए कुछ इस तरह का उपयोग कर सकते हैं: if(typeof document.hasFocus === 'undefined') { document.hasFocus = function () { return document.visibilityState == 'visible'; } }

— केंट

Answer 3

सरल जावास्क्रिप्ट स्निपेट

घटना आधारित:

function focuschange(fclass) {
    var elems=['textOut','textFocus'];
    for (var i=0;i<elems.length;i++) {
        document.getElementById(elems[i]).
            setAttribute('class',fclass);
    }
}
window.addEventListener("blur",function(){focuschange('havnt')});
window.addEventListener("focus",function(){focuschange('have')});
focuschange('havnt');

.have                { background:#CFC; }
#textOut.have:after  { content:'';      }
.havnt               { background:#FCC; }
#textOut.havnt:after { content:' not';  }

<span id='textOut'>Have</span><span id='textFocus'> focus</span>

अंतराल पूल आधारित:

setInterval(function() {
    var fclass='havnt';
    if (document.hasFocus()) {
      fclass='have';
    };
    var elems=['textOut','textFocus'];
    for (var i=0;i<elems.length;i++) {
        document.getElementById(elems[i]).
            setAttribute('class',fclass);
    }
},100);

#textOut.have:after  { content:'';     }
#textOut.havnt:after { content:' not'; }
.have  { background:#CFC; }
.havnt { background:#FCC; }

<span id='textOut'>Have</span><span id='textFocus'> focus</span>

Comments

मुझे घटना आधारित समाधान के कारण यह उत्तर पसंद है । Imho, यह हमेशा पसंदीदा तरीका होना चाहिए।

— अर्ध

Answer 4

HTML:

<button id="clear">clear log</button>
<div id="event"></div>​

जावास्क्रिप्ट:

$(function(){

    $hasFocus = false;

    $('#clear').bind('click', function() { $('#event').empty(); });

    $(window)
        .bind('focus', function(ev){
            $hasFocus = true;
            $('#event').append('<div>'+(new Date()).getTime()+' focus</div>');
        })
        .bind('blur', function(ev){
            $hasFocus = false;
            $('#event').append('<div>'+(new Date()).getTime()+' blur</div>');
        })
        .trigger('focus');

    setInterval(function() {
        $('#event').append('<div>'+(new Date()).getTime()+' has focus '+($hasFocus ? 'yes' : 'no')+'</div>');
    }, 1000);
});​

परीक्षा

अपडेट करें:

मैं इसे ठीक कर दूँगा, लेकिन IE बहुत अच्छी तरह से काम नहीं करता है

परीक्षण अद्यतन

Comments

टैब स्विच करते समय स्पष्ट रूप से धब्बा आग नहीं करता है। :(

— जेथ्रो लार्सन