सही जावास्क्रिप्ट बैनर क्षेत्र कोड उत्पन्न करें

कल्पना करें कि हम एक विज्ञापन नेटवर्क या ऐसा ही कुछ कर रहे हैं जहाँ हमें उपयोगकर्ताओं को एक विशिष्ट JS कोड देने की आवश्यकता है, इसे पृष्ठ पर अलग-अलग स्थानों में सम्मिलित करते हुए, विभिन्न चीजों को वहाँ प्रदर्शित किया जाएगा। उदाहरण के लिए बैनर। सबसे अक्सर सामना किए जाने वाले विकल्प थे:

• सादा HTML एम्बेड बैनर कोड (फ्लैश ड्राइव, चित्र)।
• एक iframe सम्मिलित करें, जहाँ html कोड iframe में एक अलग अनुरोध द्वारा उत्पन्न होता है।
• जब js पर डॉक्यूमेंट के माध्यम से लिखा जाता है। दो कोड उपरोक्त विधियों के लिए लिखे जाते हैं।

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

लेकिन, इन दो बिंदुओं को सुधारने के अलावा, आइए अपने कार्य में दो और शर्तें जोड़ें और देखें कि हमारे विदेशी सहयोगियों ने buellellpret पर इसे कैसे हल किया। यह आवश्यक है कि बैनर ज़ोन किसी भी कोड को दिखा सकता है, साथ ही बैनर के लिए अनुरोध में हमारी अन्य सेवा से कुछ जानकारी भेज सकता है (उदाहरण के लिए, हमारी सेवा में उपयोगकर्ता आईडी जो साइट पर कार्यों का इतिहास रखता है)।

इसलिए, हम बैनर ज़ोन के लिए सही कोड जेनरेट करते हैं और हैबरकैट के तहत उनके लिए एक हैंडलर लिखते हैं।

मैं आपको संक्षेप में और योजनाबद्ध रूप से बताऊंगा, लेकिन एक कामकाजी उदाहरण के साथ, और विस्तार से यह यहां प्रेरणा के लिए कोड को देखने और इसे पढ़ने के लिए सही करने के लिए संभव होगा।

चार उपर्युक्त समस्याओं को हल करने के लिए, आपको एक एकल बैनर लोडर स्क्रिप्ट बनाने की ज़रूरत है जिसे किसी भी समय अपडेट किया जा सकता है, जो बैनर पृष्ठ पर आउटपुट से पहले, किसी अन्य सेवा से आवश्यक जानकारी का अनुरोध करेगा और पृष्ठ पर किसी भी बैनर को प्रदर्शित करने में सक्षम होगा। मुझे ऐसा लगा कि buysellads कोड को विभाजित करके थोड़ा पाप करता है जो वे दो में वेबमास्टरों को देते हैं। एक एकल बैनर लोडर स्क्रिप्ट हेडर में जुड़ा हुआ है, और फिर उन जगहों पर जहां उन्हें प्रदर्शित किया जाएगा, उन्हें पृष्ठ पर रखा गया है।

हमारे मामले में, वेबमास्टर को एकल बैनर ज़ोन कोड दिखाते हुए प्रत्येक बैनर स्थान के बगल में बूटलोडर को करना या कॉल करना भी संभव होगा। एक पृष्ठ पर एक बैनर सम्मिलित करने का एक उदाहरण:

<script type="text/javascript" src="http://digistr.net/static/digistrnet.js"></script> <script type="text/javascript"> var bn = {width: 200, height: 600, param: "value"} _digistrNET.showProducts(bn); </script> 

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

इसलिए, यदि मैंने (लोडर) अभी तक पेज पर लोड नहीं किया है, तो हम उन सभी कार्यों को लिखते हैं जिनकी हमें आवश्यकता है। यहां, शोप्रोडक्ट्स फ़ंक्शन को तुरंत कहा जाता है, लेकिन बैनर नहीं खींचा गया है। अभी के लिए, हमें केवल यह याद रखने की आवश्यकता है कि पेज लोड होने पर इसे कहाँ दिखाना होगा। ऐसा करने के लिए, कॉल करते समय, हम वर्तमान स्थान में एक विशिष्ट आईडी के साथ एक खाली और अदृश्य div बनाते हैं, ताकि बाद में यह पृष्ठ पर पाया जा सके। इसके अलावा, सादगी के लिए, हम इस फ़ंक्शन को कॉल का रिकॉर्ड रखते हैं और तुरंत एक बैनर कोड उत्पन्न करते हैं जो इस स्थान पर प्रदर्शित किया जाएगा। यह थोड़ा अशोभनीय है, क्योंकि अभी तक किसी अन्य सेवा का कोई डेटा नहीं है, लेकिन अब तक। वैसे, यहां बैनर कोड कोई भी हो सकता है। हम किसी भी स्क्रिप्ट को लोड कर सकते हैं, या तो तुरंत एक फ्लैश ड्राइव डालें, या बस पृष्ठ पर पाठ प्रदर्शित करें।

Buysellads में, ऐसे divs को तुरंत एक पृष्ठ पर रखा जाता है जहाँ बैनर स्थान का वर्ग कोड बाद में यह निर्धारित करने के लिए कक्षा में इंगित किया जाता है कि किस बैनर को प्रदर्शित करना है। बैनर कोड वहाँ उत्पन्न नहीं होता है, यह जेएस फ़ाइल के अनुरोध के बाद होता है, जो पहले से ही बैनर प्रदर्शित करता है।

इसके अलावा हम देखते हैं कि बूटलोडर में, फ़ाइल के अंत में सभी कार्यों के बाद, बैनर के लिए आवश्यक डेटा के लिए एक अनुरोध भेजा जाता है। मेरे पास यह _loadTracker है। जवाब में, हमें एक स्क्रिप्ट मिलेगी जो हमारे कॉलबैक फ़ंक्शन को कॉल करती है, जैसा कि वे JSONP के बारे में कहते हैं, जो हमारे लोडर को व्यक्तिगत उपयोग के लिए प्राप्त डेटा प्रदान करेगा।

इसके अलावा window.onload पर कोड हमारे बैनर के प्रदर्शन का कारण बनता है। इस प्रकार, जब पृष्ठ पर सब कुछ लोड किया जाता है, तो उन्हें दिखाया जाएगा। यहां यह जांच के लायक है कि यदि किसी तृतीय-पक्ष सेवा से डेटा अभी तक नहीं आया है, तो आपको टाइमर पर थोड़ी देर बाद प्रतीक्षा करने और फिर से प्रयास करने की आवश्यकता है। लेकिन, आमतौर पर, पृष्ठ लोड होने से पहले, यह डेटा पहले से ही आता है। पेज लोड किया गया है। हालांकि यह दिलचस्प है कि क्या ऑन लोड लिपियों में लोड होने के लिए अनुरोध किए गए डेटा की प्रतीक्षा कर रहा है या बस जल्दी से इस उदाहरण में सब कुछ लोड किया गया था। कौन बताएगा?

जब डेटा प्राप्त होता है, तो हम उन बैनर की पूरी सूची पर जाते हैं, जो शो-प्रॉडक्ट्स पर कॉल के दौरान संकलित किए गए थे और पहले छोड़े गए ट्रैकिड पैरामीटर की जगह, पहले छोड़ दिए गए डिवोर्स के बजाय संबंधित कोड प्रदर्शित करते हैं।

Buysellads के मामले में, वे getElementsByClassName और getElementsByTagName का उपयोग पृष्ठ पर रखे गए विभाजनों को खोजने के लिए करते हैं। कुछ वहाँ नहीं है बस कैसे दिखना है। लेकिन उनके मामले में, बूटलोडर को बूट करने के लिए इंतजार नहीं करना पड़ता है। यह कोड एसिंक्रोनस रूप से डाला गया है:

 <!-- BuySellAds.com Ad Code --> <script type="text/javascript"> (function(){ var bsa = document.createElement('script'); bsa.type = 'text/javascript'; bsa.async = true; bsa.src = 'http://cdn.buysellads.com/ac/pro.js'; (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa); })(); </script> <!-- END BuySellAds.com Ad Code --> 

इस लोडर से जेएस को आमंत्रित किए बिना पृष्ठ पर तलाक दिया जाता है।

 <div id="bsap_23" class="bsaPROrocks" data-serve="CVAE"></div> 

यह हमारे द्वारा जांचे गए उदाहरण की तुलना में थोड़ा ठंडा है। लेकिन मेरे मामले में मापदंडों के साथ काम करना आसान है, वे सीधे पृष्ठ पर लिखे जाते हैं और उनमें से बड़ी संख्या में यह डेटाबेस के लिए अतिरिक्त अनुरोधों के बिना, अधिक सुविधाजनक होगा। अपने मामले में कैसे करें - आपको चुनने के लिए, यह एक सामान्य योजना है।

लोडर के कॉमन कोड को हेडर में डाला जा सकता है (पहले बैनर को कहा जाता है) से पहले, या प्रत्येक पैरामीटर के साथ कहा जाता है (यह कैश से सभी समान होगा), बैनर मापदंडों और पृष्ठ पर किसी भी प्रदर्शन विकल्पों को पारित करने के लिए अपनी खुद की स्क्रिप्ट लिखें। पेज लोड करने के बाद सब कुछ दिखाई देगा।

खैर, यह सब है। पृष्ठ पर बैनर। विधि इंटरनेट पर उन लोगों की समीक्षा की सबसे सही लग रही थी। आपको क्या लगता है, इस तथ्य के अलावा कि कई बैनर नाराज लग रहे हैं?