यदि कोई पृष्ठ पृष्ठभूमि पर है या jquery/जावास्क्रिप्ट के साथ अग्रभूमि है तो यह कैसे पता लगाया जा सकता है?

Question

शीर्षक स्वयं को समझाता है। मैं कैसे पता लगा सकता हूं कि कोई वेब पेज पृष्ठभूमि में गया है या नहीं?

मैं चैट एप्लिकेशन लागू कर रहा हूं और मैं इस सूचना का उपयोग नई संदेश अधिसूचनाएं दिखाने का निर्णय लेने के लिए करूंगा। मुझे लगता है कि जीमेल इस तरह कुछ उपयोग करता है। यदि पृष्ठ पृष्ठभूमि पर है, तो यह डेस्कटॉप नोटिफिकेशन (क्रोम पर) दिखाता है, अगर नहीं तो यह उन्हें नहीं दिखाता है।

Answer 1

मुझे पता है कि उत्तर पहले ही चुना जा चुका है लेकिन मैं एक और तरीका साझा करना चाहता था।

पर hasFocus विधि का उपयोग यह देखने के लिए कि क्या यह फोकस है या नहीं। अपना खुद का चर सेट करने का कोई कारण नहीं है।

यहां अवधारणा कोड का कुछ सबूत है। jsFiddle नीचे है। प्रत्येक 3 सेकंड यह जांच करेगा कि खिड़की पर ध्यान केंद्रित किया गया है या नहीं, सही या गलत प्रदर्शित नहीं है।

HTML:

<p>This will show if the document has focus every three seconds</p> 
<button id="go">Go</button> 
<button id="stop">Stop</button> 

<ul id="active_log"> 
</ul> 

सीएसएस:

#stop { display: none; } 

जावास्क्रिप्ट अंदर दस्तावेज़ तैयार पर:

var timeout = null; 

var checkActive = function() { 
    var isActive = window.document.hasFocus(), 
     $activity = $("<li />").text(isActive.toString()); 

    $('#active_log').prepend($activity).find('li:nth-child(n+6)').fadeOut(function() { 
     $(this).remove(); 
    }); 

    timeout = setTimeout(checkActive, 3000); 
} 

$('#go').click(function() { 
    $(this).hide().siblings('button').show(); 
    checkActive(); 
}); 

$('#stop').click(function() { 
    $(this).hide().siblings('button').show(); 
    clearTimeout(timeout); 
    timeout = null; 
}); 

http://jsfiddle.net/natedavisolds/2D7za/1/

Answer 2

आप window के blur और focus ईवेंट से जुड़ सकते हैं। यहाँ an app I wrote से एक टुकड़ा कोड है:

$(window).bind("blur", function() { 
    Chatterbox.set_focused(false); 
}); 

$(window).bind("focus", function() { 
    Chatterbox.set_focused(true); 
}); 

Answer 3

वहाँ अब इसके लिए एक page visibility API, और विंडोज, मैक ओएस एक्स, और लिनक्स (हालांकि मेरे पास है पर प्रमुख ब्राउज़रों के सभी सबसे नवीनतम संस्करणों द्वारा यह अच्छी तरह से समर्थित है वास्तव में लिनक्स ब्राउज़र बाजार के उचित हिस्से के साथ सभी ब्राउज़रों का परीक्षण नहीं किया)।

पृष्ठ दृश्यता API अब दृश्यता की जांच के लिए सबसे अच्छा तरीका है; केवल चेतावनी यह है कि यह आपको नहीं बता सकता कि ब्राउजर विंडो के कौन से हिस्से दिखाई दे रहे हैं (बस कुछ भी दिखाई नहीं दे रहा है या कम से कम कुछ हिस्सा है), और यह समर्थन 2016 के बाद से मैक पर लिनक्स, 2015 पर मौजूद है, और 2014 (संभवतः पहले) विंडोज़ पर।

समर्थन समर्थन जारी किया जा रहा था, जबकि झूठी नकारात्मक दुर्लभ थी, लेकिन कुछ प्लेटफॉर्म पर झूठी सकारात्मक घटनाएं हुईं; उदाहरण के लिए, 2014 में, ओएसएक्स ने डॉक में कम से कम अनुप्रयोगों के लघु संस्करणों को प्रस्तुत किया, और जिस तरह से यह किया गया था, उसके परिणामस्वरूप, एक एप्लिकेशन आसानी से यह नहीं बता सका कि इसे कम किया गया था, क्योंकि इसे अभी भी स्क्रीन पेंट करने के लिए कहा गया था। लिनक्स को यह जानने के साथ जटिलताएं थीं कि आपका एप्लिकेशन एक गैर-दृश्यमान कार्यक्षेत्र पर था, और क्या कोई और विंडो इसे रोक रही थी।

पहला सार्वजनिक मसौदा जून 2011 में प्रकाशित हुआ था, और यह मई 2013 में "अनुशंसा" स्थिति तक पहुंच गया। मार्च 2014 तक, सभी प्रमुख विंडोज ब्राउज़र के नवीनतम संस्करणों के मानक के लिए पूर्ण समर्थन था। सभी प्रमुख मैक ब्राउज़रों के लिए पूर्ण समर्थन अप्रैल, 2015 में हासिल किया गया था। लिनक्स समर्थन कम से कम क्रोमियम के लिए 2016 के अगस्त तक हासिल किया गया था (जब Chromium issue 293128 बंद था); जबकि मैंने उनका परीक्षण नहीं किया है, मुझे उम्मीद है कि अन्य लिनक्स ब्राउज़र संभवतः गति बनाए रखेंगे, क्योंकि काम का सबसे कठिन हिस्सा यह जानने के लिए ओएस/जीयूआई टेकिट कॉन्ट्रैक्ट्स और एपीआई को एडजस्ट कर रहा है कि आपका डेस्कटॉप एप्लिकेशन संभव दिख रहा है या नहीं।