IE <8 सहित सभी ब्राउज़रों के लिए DOM-shim

शुभ दिन प्रिय हरजितेली।

कई जावास्क्रिप्ट प्रोग्रामर कुछ ब्राउज़रों में कुछ असमर्थित DOM JS API फ़ंक्शंस में आए हैं (हम उंगली से इंगित नहीं करेंगे)। निश्चित रूप से, कई लोग विभिन्न ब्राउज़रों के बीच संगतता समस्याओं को हल करने के लिए अद्भुत es5-shim और DOM-shim पुस्तकालयों से परिचित हैं, और DOM-shim DOM4 स्तर पर ब्राउज़र को "खींचता" भी है।

इस लेख में, मैं आपको बताऊंगा कि IE6 और IE7 में DOM-shim कैसे बनाते हैं ताकि इन ब्राउज़रों के अस्तित्व को हमेशा के लिए भुला दिया जा सके।

समस्या

कुछ बताने को नहीं है। संस्करण 9 से पहले IE मानक DOM API का बहुत समर्थन नहीं करता है:

• addEventListener
• removeEventListener
• dispachEvent
• classList
• आदि

और यदि IE8 को DOM-shim का उपयोग करके आवश्यक कार्यक्षमता को लागू करके "कड़ा किया जा सकता है", तो IE6 और IE7, दुर्भाग्य से, इस पुस्तकालय (11.24.2011 के मुद्दों / 29 के अनुसार ) द्वारा समर्थित नहीं हैं, क्योंकि IE 8 में नोड नहीं है। प्रोटोटाइप।

निर्णय

वास्तव में, समाधान काफी स्पष्ट है और मैंने एक साल पहले अपनी परियोजनाओं में इसका इस्तेमाल किया था, जब मैंने सिर्फ जावास्क्रिप्ट - व्यवहार: url (.htc) [ DHTML व्यवहार का परिचय ] का अध्ययन शुरू किया था। लेकिन फिर मुझे इस निर्णय को छोड़ना पड़ा, क्योंकि यह वास्तव में, पृष्ठ लोडिंग को धीमा कर दिया था - पृष्ठ को अपेक्षाकृत छोटे पृष्ठ के लिए लोड होने के बाद, मुझे 30 सेकंड इंतजार करना पड़ा।
कुछ समय बाद, मैं गलती से हर 100 बार व्यवहार के साथ व्यवहार के साथ पृष्ठ लोडिंग को गति देने के बारे में जानकारी पर ठोकर खाई - यह पता चला है कि आपको बस हल्के = सच्चे को जोड़ने की जरूरत है और सब कुछ बहुत तेज़ी से काम करेगा।
अब IE <8 के लिए DOM-shim बनाना मुश्किल नहीं होगा, जो मैंने किया।

चलिए शुरू करते हैं

सबसे पहले, हमें मूल es5-shim और DOM-shim की आवश्यकता है , उन्हें लें और उन्हें फिर से करें, बग्स को ठीक करें और Object.defineProperty के अनुकरण में सुधार करें:

<...> if (!object.__defineGetter__) { if(descriptor["ielt8"]) { object["get" + property] = descriptor["get"]; object["set" + property] = descriptor["set"]; } else throw new TypeError(ERR_ACCESSORS_NOT_SUPPORTED); <...> 

केवल एक अपवाद ERR_ACCESSORS_NOT_SUPPORTED को फेंकने के बजाय , हम एक विशेष ध्वज की जांच करेंगे और यदि ऐसा है, तो विशेष नामों के तहत गेट्टर और सेटर को सहेजें।
क्योंकि IE में <8 कोई Node.prototype (जो कि Object.defineProperty को पास किया गया है) नहीं है, एक विशेष ऑब्जेक्ट बनाएं जिसमें हमारे गेटर्स और सेटर जमा होंगे:

 var elementProto = window.HTMLElement && window.HTMLElement.prototype || /*ie8*/window.Element && window.Element.prototype || /*ielt8*/(window["_ielt8_Element_proto"] = {}); 

हम इसे हमेशा की तरह प्रसारित करेंगे, केवल विवरण में "ielt8" ध्वज जोड़ें:

 Object.defineProperty(elementProto, "classList", {"get" : ..., "ielt8" : true} 

अब हम अपने शिम लाइब्रेरी के सभी गेटर्स को एक ऑब्जेक्ट में जमा करते हैं। जो कुछ बचता है, वह पृष्ठ के सभी तत्वों पर "लटका" है।
Dom-shim.ielt8.htc फ़ाइल बनाएँ:

 <PUBLIC:COMPONENT lightWeight="true"> <PUBLIC:PROPERTY NAME="classList" GET="getClassList" /> <SCRIPT> getClassList = window._ielt8_Element_proto.getclassList </SCRIPT> </PUBLIC:COMPONENT> 

और इसे पृष्ठ के सभी तत्वों में जोड़ें:

 * { behavior: url(dom-shim.ielt8.htc) } 

और बस इतना ही। अब हमारे पास IE6 में भी Node.classList है!

निम्नलिखित गुणों को समान रूप से जोड़ा जाता है:

• addEventListener
• removeEventListener
• dispatchEvent
• विशेषताएँ (निश्चित)
• बच्चे (निश्चित)
• firstElementChild
• lastElementChild
• nextElementSibling
• previousElementSibling
• childElementCount
• querySelectorAll
• querySelector
• सम्मिलित करें (गैर-मानक)
• getElementsByClassName
• compareDocumentPosition
• DOCUMENT_POSITION_DISCONNECTED
• DOCUMENT_POSITION_PRECEDING
• DOCUMENT_POSITION_FOLLOWING
• DOCUMENT_POSITION_CONTAINS
• DOCUMENT_POSITION_CONTAINED_BY

छोटी चीजें

1. मैं सही विशेषताएँ, इसके लिए मैं htc स्क्रिप्ट की शुरुआत में एक विशेष कंटेनर में मूल विशेषताएँ सहेजता हूँ:

 if(!this._)this._={}; //Save original attributes property this._.__ielt8_attributes__=this.attributes; 

तो, IE6 में, व्यवहार का कार्यान्वयन IE7 से भिन्न होता है: IE7 में, स्क्रिप्ट में मूल गुण होते हैं जिन्हें <PUBLIC:PROPERTY NAME="attributes" GET="getAttributes" /> में पुनः परिभाषित किया जाता है, लेकिन IE6 में उपलब्ध नहीं हैं - getAttributes getter को तुरंत बुलाया जाता है।
इसलिए, IE6 के लिए हम एक अलग फाइल बनाते हैं।

2. सभी तत्वों ("*") के बाद से व्यवहार को संलग्न न करें IE <8 में, यह कुछ असमर्थित तत्व पर लटका दिया गया है और एक त्रुटि उत्पन्न होती है। इसे ठीक करने के लिए, आपको स्टाइल में सभी HTML टैग्स को निर्दिष्ट करना होगा:

 <style> html,body,div,span,object,iframe,h1,<... html ...>,textarea,input,select { behavior: url(dom-shim.ielt8.htc) } </style> 

कुल मिलाकर

पुस्तकालय से लिंक: github.com/termi/ES5-DOM-SHIM
मैं यह नोट करना चाहता हूं कि DOM-shim के लिए मेरी लाइब्रेरी DOM-shim से बहुत अलग है क्योंकि मैं पिछले 8 महीनों से DOM-shim (और github :) के बारे में कुछ भी जाने बिना इसे विकसित कर रहा हूं।)

एक कार्यशील उदाहरण यहां से डाउनलोड किया जा सकता है: github.com/termi/Microdata-JS (डाउनलोड करें, उदाहरणों पर जाएं / microdataTemplater, templaterTest.html खोलें)
DOM-shim में क्या हुआ जोड़ने का प्रस्ताव: github.com/Raynos/DOM-shim/issues/29

अपडेट 11.27.2011:

प्रतिबंध

.htc फाइलें .html फ़ाइल के समान डोमेन पर होनी चाहिए। उदाहरण के लिए, example.org/index.html फ़ाइल के लिए, .htc फ़ाइल example.org पर होनी चाहिए, और test.example.org/index.html फ़ाइल के लिए test.example.org पर होनी चाहिए। यह प्रतिबंध पुस्तकालय के उपयोग को काफी जटिल करता है - आप केवल .htc फ़ाइल को एक स्थैतिक सर्वर पर नहीं रख सकते हैं और इसके बारे में भूल सकते हैं। सुनिश्चित करें कि आपके पास साइट के समान डोमेन पर सभी आवश्यक .htc फ़ाइलें हैं।
समान-डोमेन सीमा
अपडेट 12.19.2011:
Nginx प्रॉक्सी के माध्यम से समान-डोमेन सीमा समाधान