"ओह, कैसे सीएसएस कोड के हर छोटे से संपादन के बाद ब्राउज़र पृष्ठ को अपडेट करते हुए थक गया!"।
मैंने इस व्यवसाय को स्वचालित करने का निर्णय लिया, ताकि एक बार, मैंने अपने पसंदीदा संपादक में सीएसएस में कोड बदल दिया, और परिवर्तन तुरंत ब्राउज़र में प्रदर्शित किए गए। और इसलिए शाम
को "
cssWatch.js "
नामक एक छोटी सी लाइब्रेरी दिखाई दी। मैं लंबे समय तक पेंट नहीं करूंगा कि हां कैसे। बस बात है।
तो cssWatch.js क्या करता है?
और यह स्क्रिप्ट वह करता है जो इसके लिए आवश्यक है - यह सीधे ब्राउज़र में सीएसएस शैलियों को अपडेट करता है।
- CssWatch.js को प्रोजेक्ट से कनेक्ट करें
- ब्राउज़र में वांछित पृष्ठ खोलें
- सीएसएस फ़ाइलों में परिवर्तन करें, और परिणाम तुरंत पृष्ठ पर प्रदर्शित होता है
कैसे जुड़े?
हम पृष्ठ पर cssWatch.js कनेक्ट करते हैं:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>cssWatch</title> <link rel="stylesheet" type="text/css" href="example.css"> <link rel="stylesheet" type="text/css" href="example2.css"> <script src="cssWatch.js"></script> </head> <body> <h2> :</h2> <div class="b-block"> example.css </div> <div class="b-block2"> example2.css </div> </body> </html>
और फिर भी, कोई अन्य हेरफेर करने की आवश्यकता नहीं है। अब शैलियाँ अपने आप अपडेट हो जाएंगी।
मैं ध्यान देता हूं कि यह जांचने के लिए कि क्या सीएसएस बदल गया है, सर्वर प्रतिक्रिया हेडर का उपयोग किया जाता है, अर्थात्। फ़ाइल सिस्टम से सीधे खोली गई फ़ाइलों पर (उदाहरण के लिए, डेस्कटॉप से)
cssWatch.js काम नहीं करेगा (अधिक सटीक रूप से, यह अपेक्षा के अनुरूप काम नहीं करेगा)।
डिफ़ॉल्ट रूप से, स्क्रिप्ट पृष्ठ पर सभी शैली फ़ाइलों के लिए सुनती है, लेकिन आप अनावश्यक को अक्षम कर सकते हैं। यह लिंक टैग में
cssWatch विशेषता जोड़कर किया जाता है:
<link rel="stylesheet" type="text/css" href="example.css"> <link rel="stylesheet" cssWatch="no" type="text/css" href="example2.css">
CssWatch.js को किसी भी परियोजना से जोड़ा जा सकता है, जिसमें सीएसएस फाइलों के घोंसले के किसी भी स्तर पर है।
लाइब्रेरी और उदाहरण के साथ संग्रह डाउनलोड करें।देखें कि यह ब्राउज़र में कैसे काम करता है।सच्ची अन्तरक्रियाशीलता नहीं है, क्योंकि मैं सीएसएस फ़ाइलों को नहीं बदलता, लेकिन ब्राउज़र कंसोल के माध्यम से आप देख सकते हैं कि यह कैसे काम करता है।
आपका ध्यान देने के लिए धन्यवाद। आपकी राय सुनकर मुझे खुशी होगी।
पीएस> आईई में परीक्षण नहीं किया। जबकि इसे लगाने का कोई तरीका नहीं है।
> मैंने स्रोत कोड का प्रसार किया ताकि अनावश्यक प्रश्न न हों:
स्रोत कोड var cssWatch = { interValUpdate: 100, arrayCssFiles: new Array(), arrayLastModified: new Array(), arrayCssObj: new Array(), counter: 0, ajax: function (obj) { var _this = this; var request=null; var lastModified = ''; try { request = new XMLHttpRequest(); } catch (e) { try { request=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { request=new ActiveXObject("Microsoft.XMLHTTP"); } } var url = obj.url+'?_=' + Math.random(); request.onreadystatechange = function (text,text2) { if (request.readyState == 4) { lastModified = /Last-Modified[]?:([^\n]+)/ig.exec(request.getAllResponseHeaders()); lastModified = lastModified[1]; if (request.status == 200) { _this.arrayCssObj[_this.counter].setAttribute('href',_this.arrayCssFiles[_this.counter]+'?_=' + Math.random()); if (lastModified) { _this.arrayLastModified[_this.counter] = lastModified.replace(/^\s+/, '').replace(/\s+$/, ''); } } setTimeout(function () { if (_this.counter < _this.arrayCssObj.length - 1) { _this.counter++; _this.loadCss(); } else { _this.counter = 0; _this.loadCss(); } },_this.interValUpdate); } }; request.open("HEAD", url, true); if (_this.arrayLastModified[_this.counter]) { request.setRequestHeader("If-Modified-Since", _this.arrayLastModified[_this.counter]); } request.send(null); return request; }, parse : function () { var _this = this; var arrayLink = document.getElementsByTagName('link'); var arrayLinkLength = arrayLink.length; for (var i = 0; i < arrayLinkLength; i++) { if (arrayLink[i].getAttribute('href').substr(-4) == '.css' && arrayLink[i].getAttribute('cssWatch') != 'no') { _this.arrayCssFiles[_this.arrayCssFiles.length] = arrayLink[i].getAttribute('href'); _this.arrayCssObj[_this.arrayCssFiles.length - 1] = arrayLink[i]; } } if (_this.arrayCssFiles.length > 0) {<b> this.loadCss(); }</b> }, loadCss: function () { var _this = this; this.ajax({url:_this.arrayCssFiles[_this.counter]}); }, create: function () { var _this = this; if (document.readyState == 'complete') { this.init(); } else { setTimeout(function () { _this.create(); },50); } } }; cssWatch.create();
युपीडी। डेनवर और इसी तरह के पैकेज पर, cssWatch.js भी काम करता है।
UPD2। कोड में एक टाइपो क्रेप ... बजाय
setTimeout(function () { _this.parse(); },50);
की जरूरत है
setTimeout(function () { _this.create(); },50);
Habr पर मैंने कोड को सही किया। मैं अभी तक संग्रह में नहीं हूं ... मैं आज इसे ठीक करूंगा।
मैं क्षमा चाहता हूँ ... यह आवश्यकतानुसार था, आप केवल "रात को देख" स्क्रिप्ट नहीं लिख सकते हैं