यह निर्धारित करने के लिए 3 विशिष्ट तरीके उपयोग किए जाते हैं कि क्या उपयोगकर्ता HTML पृष्ठ देख सकता है, हालांकि उनमें से कोई भी पूरी तरह से काम नहीं करता है:
W3C पृष्ठ दृश्यता API यह करने के लिए माना जाता है (समर्थित के बाद से: फ़ायरफ़ॉक्स 10, MSIE 10, क्रोम 13)। हालाँकि, यह एपीआई केवल उन घटनाओं को बढ़ाता है जब ब्राउज़र टैब पूरी तरह से ओवरराइड हो जाता है (जैसे जब उपयोगकर्ता एक टैब से दूसरे में बदलता है)। जब दृश्यता 100% सटीकता (जैसे किसी अन्य एप्लिकेशन पर स्विच करने के लिए Alt + Tab) के साथ निर्धारित नहीं की जा सकती, तो API ईवेंट नहीं बढ़ाती है।
फ़ोकस / ब्लर आधारित विधियों का उपयोग करने से आपको बहुत सी झूठी सकारात्मक जानकारी मिलती है। उदाहरण के लिए, यदि उपयोगकर्ता ब्राउज़र विंडो के शीर्ष पर एक छोटी विंडो प्रदर्शित करता है, तो ब्राउज़र विंडो फ़ोकस ( onblurबढ़ा हुआ) खो देगी लेकिन उपयोगकर्ता अभी भी इसे देख पा रहा है (इसलिए इसे अभी भी ताज़ा करने की आवश्यकता है)। Http://javascript.info/tutorial/focus को भी देखें
- उपयोगकर्ता गतिविधि (माउस चाल, क्लिक, कुंजी टाइप) पर भरोसा करने से आपको बहुत सी झूठी सकारात्मक भी मिलती है। ऊपर के रूप में एक ही मामले के बारे में सोचो, या एक वीडियो देखने वाले उपयोगकर्ता।
ऊपर वर्णित अपूर्ण व्यवहार को सुधारने के लिए, मैं 3 विधियों के संयोजन का उपयोग करता हूं: W3C दृश्यता API, फिर झूठी सकारात्मक दर को कम करने के लिए फ़ोकस / ब्लर और उपयोगकर्ता गतिविधि विधियों पर ध्यान दें। यह निम्नलिखित घटनाओं का प्रबंधन करने की अनुमति देता है:
- ब्राउज़र टैब को एक दूसरे से बदलना (100% सटीकता, W3C पृष्ठ दृश्यता API के लिए धन्यवाद)
- संभावित रूप से Alt + Tab (संभावित 100% सटीक नहीं) के कारण किसी अन्य विंडो द्वारा छिपाया गया पेज
- उपयोगकर्ता का ध्यान संभवतः HTML पृष्ठ पर केंद्रित नहीं है (संभाव्य = 100% सटीक नहीं)
यह इस तरह से काम करता है: जब दस्तावेज़ फ़ोकस खो देता है, तो दस्तावेज़ पर उपयोगकर्ता गतिविधि (जैसे माउस चाल) यह निर्धारित करने के लिए निगरानी की जाती है कि खिड़की दिखाई दे रही है या नहीं। पृष्ठ दृश्यता की संभावना पृष्ठ पर अंतिम उपयोगकर्ता गतिविधि के समय के विपरीत आनुपातिक है: यदि उपयोगकर्ता दस्तावेज़ पर लंबे समय तक कोई गतिविधि नहीं करता है, तो पृष्ठ संभवतः सबसे अधिक दिखाई नहीं देता है। W3C पृष्ठ दृश्यता API की नकल करने वाला कोड नीचे व्यवहार करता है: यह उसी तरह व्यवहार करता है, लेकिन एक छोटी झूठी सकारात्मक दर है। इसका मल्टीब्रोसर (फ़ायरफ़ॉक्स 5, फ़ायरफ़ॉक्स 10, एमएसआईई 9, एमएसआईई 7, सफारी 5, क्रोम 5 टेस्ट पर परीक्षण) होने का फायदा है।
<div id = "x"> </ div>
<Script>
/ **
दिए गए ऑब्जेक्ट के लिए ईवेंट के लिए हैंडलर को पंजीकृत करता है।
@ अपरम ने उस वस्तु को देखा जो घटना को बढ़ाएगी
@param ईवेंट टाइप करें: क्लिक करें, कीपर्स, माउसओवर, ...
@ अपरम ने इवेंट हैंडलर फंक्शन किया
@param ईवेंट मोड सेट कर रहा है (सही = कैप्चरिंग ईवेंट, असत्य = बबलिंग ईवेंट)
@ ग्रेट सही है अगर इवेंट हैंडलर को सही तरीके से संलग्न किया गया है
* /
फ़ंक्शन जोड़ें (obj, evType, fn, isCapturing) {
if (isCapturing == null) हो रहा है।
अगर (obj.addEventListener) {
// फ़ायरफ़ॉक्स
obj.addEventListener (evType, fn, isCapturing);
सच लौटना;
} और अगर (obj.attachEvent) {
// MSIE
var r = obj.attachEvent ('on' + evType, fn);
वापसी r;
} अन्य {
विवरण झूठा है;
}
}
// संभावित पृष्ठ दृश्यता परिवर्तन के लिए रजिस्टर करें
addEvent (दस्तावेज़, "पोटेंशियलवाइसीचेंज", फंक्शन (ईवेंट) {
document.getElementById ("x")। भीतर HTML + = "संभाव्य क्षमता: परिवर्तन: संभावितHidden =" + document.potentialHidden + ", document.potentiallyHiddenSince =" + document .potentiallyHiddenSince + "s <br>";
});
// W3C पृष्ठ दृश्यता API पर रजिस्टर करें
var छिपा हुआ = अशक्त;
var दृश्यता परिवर्तन = अशक्त;
अगर (टाइप करें document.mozHidden! == "अपरिभाषित") {
छिपा = "mozHidden";
visibilityChange = "mozvisibilitychange";
} और अगर (टाइपो डॉक्यूमेंट .msHidden! == "अनिर्धारित") {
छिपा = "msHidden";
visibilityChange "msvisibilitychange" =;
} और अगर (टाइपऑफ़ दस्तावेज़ ।webkitHidden! == "अपरिभाषित") {
छिपा = "webkitHidden";
visibilityChange "webkitvisibilitychange" =;
} और अगर (टाइपो डॉक्यूमेंट.हेड! == "हिडन") {
छिपा = "छिपा";
visibilityChange = "visibilitychange";
}
अगर (छिपा हुआ! = अशक्त && दृश्यता परिवर्तन! = अशक्त) {
addEvent (दस्तावेज़, दृश्यता परिवर्तन, फ़ंक्शन (घटना) {
document.getElementById ("x")। भीतर HTML + = दृश्यता परिवर्तन + ":" + छिपा + "=" + दस्तावेज़ [छिपा] + "<br>";
});
}
var संभावितPageVisibility = {
पेजविजिबिलिटी चेंजट्रेशल्ड: 3 * 3600, // सेकंड में
init: फ़ंक्शन () {
फंक्शन सेटअनॉटहेड () {
var dispatchEventRequired = document.potentialHidden;
document.potentialHidden झूठी =;
document.potentiallyHiddenSince = 0;
if (dispatchEventRequired) dispatchPageVisibilityChangeEvent ();
}
फ़ंक्शन initPotentiallyHiddenDetection () {
अगर (है! हैफोकल) {
// विंडो में फ़ोकस नहीं है => विंडो में उपयोगकर्ता गतिविधि के लिए जाँच करें
lastActionDate = नई तिथि ();
अगर (टाइमआउट हैंडलर! = अशक्त) {
clearTimeout (timeoutHandler);
}
timeoutHandler = setTimeout (checkPageVisibility, potentialPageVisibility.pageVisibilityChangeThreshold * 1000 + 100); // +100 एमएस फ़ायरफ़ॉक्स के तहत समस्याओं से बचने के लिए
}
}
समारोह प्रेषणपैजिबिलिटी परिवर्तन () {
unifiedVisilityChangeEventDispatchAllowed झूठी =;
var evt = document.createEvent ("इवेंट");
evt.initEvent ("potentialvisilitychange", सत्य, सत्य);
document.dispatchEvent (evt);
}
समारोह checkPageVisibility () {
var संभावितहेडड्रेडेशन = (hasFocusLocal || lastActionDate == null; 0: Math.floor ((नई तिथि) () getTime () - lastActionDate.getTime () / 1000 /);
document.potentiallyHiddenSince = potentialHiddenDuration;
अगर (पोटेंशियल हैडिडेशन> = पोस्पेक्ट विजिबिलिटी। पेज विजिबिलिटी चेंजट्रेशोल्ड &&! document.potentialHidden) {
// पृष्ठ दृश्यता में परिवर्तन की सीमा => समान बढ़ाएँ
document.potentialHidden सच =;
dispatchPageVisibilityChangeEvent ();
}
}
var lastActionDate = null;
var hasFocusLocal = true;
var hasMouseOver = true;
document.potentialHidden झूठी =;
document.potentiallyHiddenSince = 0;
var timeoutHandler = null;
addEvent (दस्तावेज़, "पेजशो", फ़ंक्शन (घटना) {
document.getElementById ( "x") innerHTML + = "pageshow / doc: <br>"।
});
addEvent (दस्तावेज़, "पेजहाइड", फ़ंक्शन (घटना) {
document.getElementById ( "x") innerHTML + = "pagehide / doc: <br>"।
});
addEvent (विंडो, "पेजशो", फंक्शन (ईवेंट) {
document.getElementById ( "x") innerHTML + = "pageshow / जीत: <br>"। // उठाया गया जब पृष्ठ पहले दिखाता है
});
addEvent (विंडो, "पेजहाइड", फंक्शन (ईवेंट) {
document.getElementById ( "x") innerHTML + = "pagehide / जीत: <br>"। // नहीं उठाया गया
});
addEvent (दस्तावेज़, "मूसमव", फ़ंक्शन (घटना) {
lastActionDate = नई तिथि ();
});
addEvent (दस्तावेज़, "माउसओवर", फ़ंक्शन (घटना) {
hasMouseOver सच =;
setAsNotHidden ();
});
addEvent (दस्तावेज़, "माउसआउट", फ़ंक्शन (घटना) {
hasMouseOver झूठी =;
initPotentiallyHiddenDetection ();
});
addEvent (विंडो, "ब्लर", फंक्शन (ईवेंट) {
hasFocusLocal झूठी =;
initPotentiallyHiddenDetection ();
});
addEvent (विंडो, "फ़ोकस", फ़ंक्शन (ईवेंट) {
hasFocusLocal सच =;
setAsNotHidden ();
});
setAsNotHidden ();
}
}
potentialPageVisibility.pageVisibilityChangeThreshold = 4; // परीक्षण के लिए 4 सेकंड
potentialPageVisibility.init ();
</ Script>
चूंकि वर्तमान में झूठी सकारात्मक के बिना कोई काम नहीं कर रहा है क्रॉस-ब्राउज़र समाधान, आपको अपनी वेब साइट पर आवधिक गतिविधि को अक्षम करने के बारे में दो बार बेहतर सोचना चाहिए।
requestAnimationFrameएपीआई की जांच करें या आधुनिक सुविधा का उपयोग करें, जब खिड़की दिखाई न देने परsetTimeout/ आवृत्तिsetIntervalकम हो जाती है (उदाहरण के लिए क्रोम में सेकंड)।