बुकमार्क जेएस: "VKontakte वीडियो एल्बम"

प्रसिद्ध सामाजिक नेटवर्क लगातार अपडेट किया जाता है, जो हमेशा उपयोगकर्ताओं के लिए गंभीर आनंद नहीं लाता है। कितने लोगों की राय है, आप सभी को खुश नहीं कर सकते, और एक दिन मैं VKontakte पर वीडियो एल्बम प्रदर्शित करने की नई शैली से खुश नहीं था।
लेकिन हम प्रोग्रामर फुर्तीले लोग हैं, हम तुरंत हंसते हैं - यहां यह कुछ ऐसा बनाने का एक खुशी का मौका है ... इसलिए मैंने एक छोटा उपकरण बनाया जिसे मैं साझा करना चाहता हूं, और उसी समय याद रखें कि यह क्या है और कैसे बुकमार्क किए जाते हैं।

बुकमार्कलेट, जो नहीं जानता है, ब्राउज़र की बुकमार्क में एक ऐसी स्क्रिप्ट है, जो लिंक पर सामान्य क्लिक के अलावा (या इसके बजाय), आवश्यक कोड को भी निष्पादित कर सकता है, इस प्रकार एक बटन में जावास्क्रिप्ट के लानत सुविधाओं को केंद्रित करता है। यह एक मैक्रो की तरह है।

इसलिए, मेरे लिए, पिछली शैली बहुत अधिक सुविधाजनक थी जब वीडियो के एल्बमों की सूची को किनारे पर कॉम्पैक्ट रूप से प्रदर्शित किया गया था, जिस पर क्लिक करके वांछित के लिए संक्रमण किया गया था। इसलिए मैंने सोचा, मैं एक प्रकार का बुकमार्क बनाऊंगा जो इस सूची का निर्माण करेगा। वीडियो पृष्ठ पर जाने के बाद, मैंने डिबगर में फ़ंबल किया और पाया कि एल्बम के नाम "div_album_text fl_l" वर्ग के साथ एक दिव्य तत्व में संग्रहीत हैं, यह तत्व वर्ग "video_album_info" के साथ एक div में रहता है, और वह तत्व एक तत्व (एंकर) में रहता है, जिसका href है एल्बम के लिए बस सही लिंक।

"यूरेका!" मैंने कहा, और स्नान से बाहर कूद गया ... यानी यह पता लगा लिया कि मुझे केवल "वीडियो_बालब_टेक्स्ट fl_l" क्लास वाले सभी तत्वों को पृष्ठ से इकट्ठा करने की जरूरत है, उनके माध्यम से जाएं और प्रत्येक के माता-पिता के माता-पिता से href लिंक को बाहर निकालें (यह एक टाइपो नहीं है)।
कुल, निम्नलिखित कोड का जन्म हुआ:

var str = '', alb = document.getElementsByClassName('video_album_text fl_l'); for (var i = 0; i < alb.length; i++) { var href = alb[i].parentNode.parentNode.href; str += '<a href="' + href + '">' + alb[i].innerHTML + '</a><br>'; } 

getElementsByClassName निश्चित रूप से 6, 7 और 8 IE में काम नहीं करता है, लेकिन मैं पहले से ही उनमें से लंबे समय से बाहर हो गया हूं, और इसके द्वारा - यह नहीं है। मैं एल्ब संग्रह में तत्वों को इकट्ठा करता हूं, लूप के माध्यम से समाप्त स्ट्रिंग से इकट्ठा करता हूं।

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

 var div = document.createElement('div'); div.style.cssText = 'position:fixed;bottom:0px;left:0px;width:' + 200 + 'px;height:80%;overflow:auto;z-index:1000;background-color:white;padding:5px;border:solid 1px black;'; div.innerHTML = '<a href="#" onclick="this.parentNode.style.display=\'none\'">[x]</a>'+ '<a href="#" onclick="var parN=this.parentNode; parN.style.height=parN.style.height==\'10px\'?\'80%\':\'10px\'">[-]</a>'+ '<a href="#" onclick="var parN=this.parentNode,cl=parseInt(parN.style.left);if(cl>=' + 200 + ')parN.style.left=cl-' + (200 + 12) + '+\'px\'">[<]</a>'+ '<a href="#" onclick="var parN=this.parentNode;parN.style.left=parseInt(parN.style.left)+' + (200 + 12) + '+\'px\'">[>]</a><br>' + str; document.body.appendChild(div); 

एक दिव्य तत्व बनाया जाता है, इसे cssText संपत्ति के माध्यम से एक निश्चित शैली सौंपी जाती है, जहां यह इंगित किया जाता है कि यह एक निश्चित स्थिति की एक खिड़की है, जो निचले बाएँ कोने से चिपकी हुई है (नीचे: 0px; बाएं: 0px;) और अन्य स्वाद के लिए स्वाद ... और तत्व की सामग्री (div.innerHTML) ) ऑनक्लिक विशेषताओं के साथ नियंत्रण बटन पहले रिकॉर्ड किए गए हैं, और फिर str, समय सीमा से पहले एकत्र किए गए, लिंक की एक सूची है। इंटरफ़ेस विकसित करते समय ऑनक्लिक निश्चित रूप से एक संदिग्ध निर्णय है, लेकिन एक बुकमार्कलेट के लिए, यह करेगा। इसके अलावा, यह सिर्फ एक त्वरित उदाहरण है, और पूर्णता की कोई सीमा नहीं है। उदाहरण के लिए, मैंने खिड़की की चौड़ाई को एक अलग चर वाई में डालने का फैसला किया।

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

 javascript:var str='', wi=200, alb = document.getElementsByClassName('video_album_text fl_l');for(var i=0;i<alb.length;i++){var href=alb[i].parentNode.parentNode.href;str+='<a href="'+href+'">'+alb[i].innerHTML+'</a><br>';}var div=document.createElement('div');div.style.cssText = 'position:fixed;bottom:0px;left:0px;width:'+wi+'px;height:80%;overflow:auto;z-index:1000;background-color:white;padding:5px;border:solid 1px black;';div.innerHTML = '<a href="#" onclick="this.parentNode.style.display=\'none\'">[x]</a><a href="#" onclick="var parN=this.parentNode; parN.style.height=parN.style.height==\'10px\'?\'80%\':\'10px\'">[-]</a><a href="#" onclick="var parN=this.parentNode,cl=parseInt(parN.style.left);if(cl>='+wi+')parN.style.left=cl-'+(wi+12)+'+\'px\'">[<]</a><a href="#" onclick="var parN=this.parentNode;parN.style.left=parseInt(parN.style.left)+'+(wi+12)+'+\'px\'">[>]</a><br>'+str;document.body.appendChild(div); 

बेशक, यह सब काम करेगा जब वर्तमान HTML संरचना और वर्ग "video_album_text fl_l" संरक्षित हैं।
इसे इस तरह इस्तेमाल करने के लिए: वीडियो पेज पर जाएं और बुकमार्क बार पर बुकमार्कलेट बटन पर क्लिक करें। एक एल्बम एल्बमों की एक सूची के साथ दिखाई देती है, जिसे [x] [-] [<] [>] बटन के साथ बंद किया जा सकता है, कम से कम किया जा सकता है।
और यह डिजाइन कुछ इस तरह दिखता है:


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