👶 👰🏽 🤬 पृष्ठ को ताज़ा किए बिना डायनामिक फ़ेविकॉन या प्रदर्शन कर्म 🧜🏿 📌 🛃

हम में से प्रत्येक, मेरा मानना है, हमारे पसंदीदा ब्राउज़र में एक ही समय में लगातार कई टैब हैं। एक से अधिक बार ऐसे मामले सामने आते हैं कि टैब का शीर्षक दिखाई नहीं देता - केवल फेविकॉन का। लेकिन अक्सर वे साइट लोगो प्रदर्शित करने के अलावा अन्य जानकारी प्रदान नहीं करते हैं। और शायद व्यर्थ। लेकिन हम इस जगह का उपयोग करने की कोशिश करेंगे (जितना कि 16px * 16px!) जिस तरह से हम चाहते हैं। कम से कम हम जानेंगे कि यह कैसे करना है।

<लिंक [rel = "आइकन"] ... /> को बदलने का प्रयास भी न करें।

कोई, शायद, बहाना करेगा: “यहाँ क्या इतना जटिल है? मैंने लिंक टैग लिया और उसमें src बदल दिया! " लेकिन वहाँ यह था, कामरेड। यह कोड काम नहीं करेगा:

var oldicons = document .querySelectorAll( 'link[rel="icon"], link[rel="shortcut icon"]' ); for ( var i = 0; i < oldicons.length; i++ ) { oldicons[i].setAttribute( "src" , "/newicon.png" ); }

var oldicons = document .querySelectorAll( 'link[rel="icon"], link[rel="shortcut icon"]' ); for ( var i = 0; i < oldicons.length; i++ ) { oldicons[i].setAttribute( "src" , "/newicon.png" ); }

var oldicons = document .querySelectorAll( 'link[rel="icon"], link[rel="shortcut icon"]' ); for ( var i = 0; i < oldicons.length; i++ ) { oldicons[i].setAttribute( "src" , "/newicon.png" ); }

var oldicons = document .querySelectorAll( 'link[rel="icon"], link[rel="shortcut icon"]' ); for ( var i = 0; i < oldicons.length; i++ ) { oldicons[i].setAttribute( "src" , "/newicon.png" ); }

यह भी एक:

$ ( 'लिंक [rel = "शॉर्टकट आइकन"]' ) .attr ( "src" , "/newicon.png" );

मैं इसे क्यों नहीं कहूंगा (क्या कोई समझाएगा?), लेकिन इसे इस तरह से किया जा सकता है (jQuery में):

$ ( 'लिंक [rel $ = icon]' ) .remove ();
$ ( 'हेड' ) .append ($ ( '<लिंक rel = "शॉर्टकट आइकन" प्रकार = "छवि / x-icon" />) ) .attr ( ' href ' , "/newicon.png" );

यही है, पहले हम तत्व को हटाते हैं, यदि कोई हो, और फिर इसे एक बच्चे के रूप में सिर के टैग में जोड़ दें। हटाने () के बजाय , आप प्रतिस्थापन ('') का भी उपयोग कर सकते हैं।

चूंकि हमें गतिशील फ़ेविकॉन्स की आवश्यकता होती है, हम उन्हें कैनवास पर आकर्षित करेंगे, और फिर फ़ेविकॉन के रूप में इसका उपयोग करेंगे।

var c = document .createElement ( 'कैनवास' );
c.height = c.width = 16;
var x = c.getContext ( '2d' );
x.font = '18px बोल्ड कैलिब्री ' ;
x.fillStyle = '# 000' ;
अगर (एम) {
x.fillText (parseInt (m [1])> 9? '9+' : m [1], 0, 16, 16);
}

DefineSetter का उपयोग करना

GMail में, हेडर में नए संदेशों की संख्या प्रदर्शित होती है:

(15) - v.pupkin@gmail.com - GMail

चलो वहाँ से regexp नंबर प्राप्त करें और नए संदेशों की संख्या प्राप्त करें।

आप Google XML / API का उपयोग कर सकते हैं ताकि आप इसे गलत न समझें, लेकिन आपको इसके लिए प्राधिकरण की आवश्यकता है, और मुझे इस विधि पर विचार नहीं करना है, क्योंकि यह GMail मेल के बारे में बिल्कुल भी नहीं है। और कैसे आप विभिन्न window.setTimeOut का सहारा लिए बिना विंडो शीर्षक परिवर्तन को संभाल सकते हैं। ऐसा करने के लिए, हम गेको की __defineSetter__ विधि (इसके बारे में अधिक जानकारी यहाँ ) लेते हैं।

यह विधि आपको एक ईवेंट हैंडलर का उपयोग करने की अनुमति देती है जब किसी तत्व का डेटा बदलता है (लेकिन अभी तक नहीं बदला गया है):

Object.prototype .__ डिफाइनसेट्टर __ ( 'Id' , फंक्शन (डेटा) {
चेतावनी ( "झुका डेटा =" + डेटा);
});

यह उदाहरण दिखाता है कि वस्तु तत्व की आईडी विशेषता को बदलने के क्षण में (और यह कोई टैग या वैश्विक चर हो सकता है), हमें एक सूचना चेतावनी ("झुका डेटा =" + डेटा) दिखाया जाएगा;

और चलिए इस "हैंडलर" को document.title पर लटकाते हैं, जिसके बाद हम अपने उपरोक्त सभी कार्यों को पूरा करेंगे, जिससे लेख के पहले भाग का सारांश होगा।

दस्तावेज़ .__ डिफाइन्टर __ ( 'शीर्षक' , फंक्शन (v) {
दस्तावेज़ हटाएं। // पुराने "हैंडलर" को हटा दें
दस्तावेज .title = v; // नए डेटा को इंटरसेप्ट करें और एक वैरिएबल में डालें
दस्तावेज़ .__ डिफाइन्टरसेट __ ( 'शीर्षक' , आर्ग्युमेंट्स.लीला); // और जल्दी से हैंडलर को उसकी जगह पर लौटा दें
var m = / \ (([0-9] +) \) /। exec (v); // एक चर के साथ संदेशों की संख्या के साथ नियमित टैग काटता है
var c = document .createElement ( 'कैनवास' ); // कैनवास शुरू करो। एक कैनवास बनाएँ
c.height = c.width = 16; // और इसे आयाम असाइन करें
var x = c.getContext ( '2d' ); // संदर्भ प्राप्त करें
x.font = '18px बोल्ड कैलिब्री ' ; // फ़ॉन्ट शैली सेट करें
x.fillStyle = '# 000' ; // और रंग भरें
अगर (एम) {
x.fillText (parseInt (m [1])> 9? '9+' : m [1], 0, 16, 16); // यदि संख्या> 9 है, तो "9+" दिखाएं
}
var o = document .querySelectorAll ( 'लिंक [rel = "आइकन"], लिंक [rel = "शॉर्टकट आइकन"]' ); // सभी संभव फ़ेविकॉन टैग ढूंढें
के लिए ( var i = 0; मैं <o.length; i ++) {
o [i] .parentNode.removeChild (o [i]); // और उन्हें धमाकेदार,
}
var n = document .createElement ( 'लिंक' ); // फिर इसे बनाएँ
n.setAttribute ( 'rel' , 'icon' ); // आवश्यक atrubuts के साथ
n.setAttribute ( 'href' , c.toDataURL ()); // c.toDataURL () पाठ में डेटा "छवि: छवि / पीएनजी; आधार 64, ......" / के रूप में हमारे कैनवास पर तैयार चित्र प्राप्त करता है;
दस्तावेज .querySelector ( 'head' ) .appendChild (n); // अच्छी तरह से, और अंत में, दस्तावेज़ में हौसले से निर्मित फ़ेविकॉन लागू करें। देखा!
});

यह कैसे काम करता है यह जांचने के लिए, लिंक पर जाएं और फिर GMail पर इनबॉक्स में जाएं। यदि नए संदेश हैं, तो आप काउंटर को फ़ेवियन चित्र के रूप में देखेंगे। यह मेरे लिए Ubuntu के तहत ओपेरा और फ़ायरफ़ॉक्स पर काम करता था। क्रोम को यह विचार पसंद नहीं आया।

यह कहां लागू किया जा सकता है?

हां, तुम जहां चाहो। उदाहरण के लिए, टैब को न देखने के लिए, क्या कोई नए संदेश हैं, आप इस पद्धति का उपयोग कर सकते हैं। हालाँकि, आप Google Labs के साथ काउंटर और FF के लिए gmail-notifier जैसी चीजों का उपयोग कर सकते हैं।

लेकिन शायद आप अपने उपयोगकर्ताओं को अपनी साइट पर किसी चीज़ के बारे में सूचित करना चाहते हैं।

या यहां तक कि आनंद लें कि आपका कर्म कैसे बढ़ता है या एक हब पर गिरता है :)

मैं बाद के मामले को एक और उदाहरण के लिए एक आधार के रूप में लूंगा।

मैंने एक स्क्रिप्ट इंजन के रूप में ग्रेसीमेक का उपयोग किया। आप इस उपयोगकर्ता नाम का उपयोग कर सकते हैं।

प्रदर्शन केवल तभी काम करेगा जब आप हेब्रसेन्ट में हैं (वैसे, केवल आपका नहीं)। आप बस अजाक्स को पेंच कर सकते हैं और अपने हब में होने के बिना अंक प्राप्त कर सकते हैं, यह आपके विवेक पर है। यदि आप चाहें, तो आप इसे Google Chrome (विस्तार लिखें) या ओपेरा (उदाहरण के लिए, वही "जावास्क्रिप्ट-बुकमार्क)" पर स्क्रू कर सकते हैं।

और यहाँ स्क्रिप्ट ही है (अद्यतन : थोड़ा अद्यतन):

var c = document .createElement ( "कैनवास" ); // एक ही कैनवास का उपयोग करें
c.height = c.width = 16;
var cx = c.getContext ( "2d" );
cx.beginPath (); // इस पर एक नीले रंग का बॉक्स और काले रंग का टेक्स्ट बनाएं
cx.rect (0, 3, 18, 11); // और उन्हें कैनवास पर रखें
cx.fillStyle = "# 6DA3BD" ;
cx.fill ();
cx.font = "10px सामान्य तहोमा" ;
cx.fillStyle = " #fff " ;
var mark = document .querySelectorAll ( ".mark span" ); // पृष्ठ से नंबर प्राप्त करें
cx.fillText (parseInt (निशान [0] .innerHTML), 0, 12, 16);
// फेविकॉन लागू करें
var oldicons = document .querySelectorAll ( 'लिंक [rel = "आइकन"], लिंक [rel = "शॉर्टकट आइकन"]' );
( var i = 0; मैं <oldicons.length; i ++) {
Oldicons [i] .parentNode.removeChild (ओल्डिकॉन [i]);
}
var newicon = document .createElement ( "लिंक" );
newicon.setAttribute ( "rel" , "icon" );
newicon.setAttribute ( "href" , c.toDataURL ());
दस्तावेज़ .querySelector ( "हेड" ) .appendChild (newicon);
// पृष्ठ को हर 2 मिनट में ताज़ा करें
window.setTimeout ( फ़ंक्शन () {
window.clearTimeout ();
window.location.reload ();
}, 120000);
* इस सोर्स कोड को सोर्स कोड हाइलाइटर के साथ हाइलाइट किया गया था।

बस इतना ही। यदि पोस्ट का कम से कम कुछ हिस्सा आप स्वयं के लिए उपयोगी पाते हैं, भले ही इससे विषय के विषय की भी चिंता न हो, तो समय को व्यर्थ मानने की अनुमति दें इसे लिखने पर व्यर्थ नहीं।

यदि आप गतिशील रूप से फ़ेविकॉन बदलने में रुचि रखते हैं, तो आप jQuery के लिए तैयार किए गए प्लगइन का उपयोग कर सकते हैं - वहां आप फ़ेविकॉन के साथ-साथ (एक ही कैनवास के माध्यम से) चेतन कर सकते हैं।

आपका ध्यान देने के लिए धन्यवाद।

पृष्ठ को ताज़ा किए बिना डायनामिक फ़ेविकॉन या प्रदर्शन कर्म

<लिंक [rel = "आइकन"] ... /> को बदलने का प्रयास भी न करें।

__DefineSetter__ का उपयोग करना

यह कहां लागू किया जा सकता है?

More articles:

DefineSetter का उपयोग करना