फ़ायरफ़ॉक्स पर विकसित किए गए जावास्क्रिप्ट के विशिष्ट कारण IE पर क्या हैं? [बन्द है]

108

जैसा कि वर्तमान में खड़ा है, यह प्रश्न हमारे प्रश्नोत्तर प्रारूप के लिए एक अच्छा फिट नहीं है। हम तथ्यों, संदर्भों या विशेषज्ञता के आधार पर उत्तर दिए जाने की अपेक्षा करते हैं, लेकिन इस सवाल पर बहस, बहस, मतदान या विस्तारित चर्चा की संभावना होगी। यदि आपको लगता है कि इस प्रश्न को बेहतर बनाया जा सकता है और संभवतः फिर से खोला जा सकता है, तो मार्गदर्शन के लिए सहायता केंद्र पर जाएं ।

7 साल पहले बंद हुआ ।

मैंने कुछ जावास्क्रिप्ट संवर्धित पृष्ठ विकसित किए हैं जो हाल के फ़ायरफ़ॉक्स और सफारी पर ठीक चलते हैं। मैं इंटरनेट एक्सप्लोरर में जांच करने से चूक गया, और अब मुझे लगता है कि पेज IE 6 और 7 (अब तक) पर काम नहीं करते हैं। लिपियों को किसी भी तरह से निष्पादित नहीं किया जाता है, पृष्ठ दिखाते हैं जैसे कि जावास्क्रिप्ट वहाँ नहीं था, हालांकि कुछ जावास्क्रिप्ट निष्पादित की जाती है। मैं स्वयं के पुस्तकालयों को डोम हेरफेर के साथ उपयोग कर रहा हूं, YUI 2 से मैं YUI-लोडर और XML-Http-Request का उपयोग करता हूं, और एक पृष्ठ पर मैं "psupload" का उपयोग करता हूं, जो JQuery पर निर्भर करता है।

मैं Office XP से Microsoft स्क्रिप्ट संपादक स्थापित कर रहा हूं और अब डीबग करूंगा। मैं अब विशिष्ट परीक्षण भी लिखूंगा।

IE के विशिष्ट विफल अंक क्या हैं? मैं अपनी आंखें किस दिशा में रख सकता हूं।

मुझे यह पृष्ठ मिला, जिसमें कुछ अंतर हैं। यात्रा: Quirksmode

क्या आप अपने अनुभव से कुछ विशिष्ट चीजों को नाम दे सकते हैं जिन्हें मुझे पहले देखना चाहिए?

मैं बाद में विशिष्ट कार्यों के लिए यहां और अधिक प्रश्न पूछूंगा, लेकिन अब मैं आपके अनुभव में दिलचस्पी रखता हूं कि IE आमतौर पर फ़ायरफ़ॉक्स में चलने वाली स्क्रिप्ट पर विफल क्यों होता है

संपादित करें: उन सभी महान उत्तरों के लिए धन्यवाद!

इस बीच मैंने पूरे कोड को अनुकूलित किया है ताकि यह इंटरनेट एक्सप्लोरर के साथ भी काम करे। मैंने jQuery को एकीकृत किया और अब इसके शीर्ष पर अपनी कक्षाएं बनाईं। यह मेरी बुनियादी गलती थी, कि मैंने शुरुआत से ही jQuery पर अपना सारा सामान नहीं बनाया था। अब मेरे पास है।

साथ ही JSLint ने मेरी बहुत मदद की।

और विभिन्न उत्तरों में से कई एकल मुद्दों ने मदद की।

— user89021
स्रोत

अब तक सीएसएस या स्टाइल के साथ कोई समस्या नहीं है, जैसा कि मुझे पता था कि पहले कोडिंग से। केवल JS समस्याएं - karlthorwald

— user89021

1

मैं पहले JSLint को अब सभी फाइलों पर चलाऊंगा, कुछ ऐसे हैं जिन्हें मैंने कभी नहीं अपनाया।

— user89021

7

"यह मेरी बुनियादी गलती थी, कि मैंने शुरुआत से ही jQuery पर अपना सारा सामान नहीं बनाया था।" - यह जादुई रूप से आपकी सभी क्रॉस-ब्राउज़र समस्याओं को हल करने वाला नहीं है। JQuery और IE के लिए स्टैकओवरफ़्लो खोजें, आपको बहुत सारे मुद्दे मिलेंगे। क्रॉस-ब्राउज़र स्क्रिप्टिंग सीखने के लिए सबसे अच्छा है जब jQuery या इसके अरबों स्केच प्लग में से एक विफल हो जाता है, तो आप एक वास्तविक कामकाजी क्रॉस-ब्राउज़र समाधान को लागू करने में सक्षम होंगे, और यह जान पाएंगे कि यह काम करता है, और क्यों।

— डग नबबिट

11

+1 ऊपर की टिप्पणी पर नहीं। आप jQuery से पूरी तरह से बचने के लिए बेहतर हैं IFF आप जावास्क्रिप्ट सीख रहे हैं - jQuery अविश्वसनीय रूप से उपयोगी है यदि आप कुछ जटिल जल्दी और आसानी से प्राप्त करना चाहते हैं, लेकिन अगर आप सीख रहे हैं तो यह समझने की जटिलताओं से आपको ढाल देगा कि वास्तव में जावास्क्रिप्ट कैसे है? काम करता है - अब तक बहुत से लोगों को jQuery पता लगता है, लेकिन उन्हें यह नहीं मिला कि कैसे जावास्क्रिप्ट लिखना है। आपने मूल रूप से jQuery पर निर्माण नहीं करने की गलती नहीं की थी - अब आपके पास अपने स्वयं के कोड की बेहतर समझ है, यदि आप थे तो।

— ल्यूसाइडर

121

यदि आपको कोई त्रुटि / चूक आदि दिखाई दे तो कृपया इस सूची को अद्यतन करने के लिए स्वतंत्र महसूस करें।

नोट: IE9 निम्नलिखित मुद्दों में से कई को ठीक करता है, इसलिए इसमें से बहुत केवल IE8 और नीचे और एक निश्चित सीमा तक IE9 पर लागू होता है। उदाहरण के लिए, IE9 एसवीजी का समर्थन करता है <canvas>, <audio>और <video>मूल रूप से, हालांकि आपको उपलब्ध होने के लिए मानकों के अनुपालन मोड को सक्षम करना होगा ।

सामान्य:

आंशिक रूप से लोड किए गए दस्तावेज़ों के साथ समस्या: अपने जावास्क्रिप्ट को window.onloadया इसी तरह की घटना में जोड़ना एक अच्छा विचार है क्योंकि IE आंशिक रूप से लोड किए गए दस्तावेज़ों में कई कार्यों का समर्थन नहीं करता है।
अलग विशेषताएँ : CSS में, यह elm.style.styleFloatIE बनाम elm.style.cssFloatफ़ायरफ़ॉक्स में है। में <label>टैग forविशेषता के साथ पहुँचा है elm.htmlForIE में बनाम elm.forफ़ायरफ़ॉक्स में। ध्यान दें कि forIE में आरक्षित है इसलिए elm['for']IE को अपवाद बढ़ाने से रोकने के लिए शायद एक बेहतर विचार है।

बेस जावास्क्रिप्ट भाषा:

तार में प्रवेश वर्ण : 'string'[0]IE में समर्थित नहीं है क्योंकि यह मूल जावास्क्रिप्ट विनिर्देशों में नहीं है। IE में तारों के साथ उपयोग करने की तुलना में सरणियों में एक्सेस करने वाली वस्तुओं का उपयोग 'string'.charAt(0)या 'string'.split('')[0]ध्यान देना काफी तेज है charAt(हालांकि कुछ प्रारंभिक ओवरहेड splitकहा जाता है जिसे पहले कहा जाता है।)
वस्तुओं के अंत से पहले कॉमस: उदाहरण के {'foo': 'bar',}लिए IE में अनुमति नहीं है।

तत्व-विशिष्ट मुद्दे:

documentएक IFrame की हो रही है :
- फ़ायरफ़ॉक्स और IE8 +: IFrame.contentDocument (IE संस्करण 8 से इसका समर्थन करना शुरू कर दिया ।)
- अर्थात: IFrame.contentWindow.document
- ( दोनों ब्राउज़रों में IFrame.contentWindowसंदर्भित windowहै।)
कैनवास: IE9 से पहले IE के संस्करण <canvas>तत्व का समर्थन नहीं करते हैं । IE VML का समर्थन करता है जो कि एक समान तकनीक है, और एक्स्प्लोरर्कानवास<canvas> कई ऑपरेशन के लिए तत्वों के लिए एक इन-प्लेस आवरण प्रदान कर सकता है । विदित हो कि मानकों के अनुपालन मोड में IE8 कई बार धीमा है और वीएमएल का उपयोग करते समय क्विरक्स मोड में होने की तुलना में कई गुना अधिक है।
SVG: IE9 मूल रूप से SVG का समर्थन करता है। IE6-8 एसवीजी का समर्थन कर सकता है, लेकिन केवल बाहरी प्लगइन्स के साथ केवल कुछ प्लगइन्स के साथ जावास्क्रिप्ट हेरफेर का समर्थन करता है।
<audio>और <video>: केवल IE9 में समर्थित हैं।
डायनामिक रूप से रेडियो बटन बनाना: IE <8 में एक बग है जो रेडियो बटन को document.createElementअनियंत्रित बनाता है । यह भी देखें कि आप जावास्क्रिप्ट में गतिशील रूप से एक रेडियो बटन कैसे बनाते हैं जो सभी ब्राउज़रों में काम करता है? एक तरह से यह चारों ओर पाने के लिए।
IE में <a href>टैग और onbeforeunloadसंघर्षों में एंबेडेड जावास्क्रिप्ट : यदि टैग के hrefहिस्से में जावास्क्रिप्ट एम्बेडेड है a(उदाहरण के लिए, <a href="javascript: doStuff()">तो IE हमेशा हैंडलर को पहले से हटाए जाने onbeforeunloadतक वापस लौटाए गए संदेश को दिखाएगा । टैब बंद करते समय पुष्टि के लिएonbeforeunload भी पूछें ।
<script>टैग घटना मतभेद: onsuccess और onerrorIE में समर्थित नहीं हैं और एक IE विशेष ने ले ली है onreadystatechange, जिनमें से डाउनलोड सफल या असफल है कि क्या परवाह किए बिना निकाल दिया जाता है। अधिक जानकारी के लिए जावास्क्रिप्ट पागलपन भी देखें ।

तत्व आकार / स्थिति / स्क्रॉलिंग और माउस स्थिति:

तत्व का आकार / स्थिति प्राप्त करना : तत्वों की चौड़ाई / ऊँचाई कभी-कभी elm.style.pixelHeight/WidthIE में होती है elm.offsetHeight/Width, लेकिन न तो IE में विश्वसनीय होती है, विशेष रूप से quirks मोड में, और कभी-कभी एक दूसरे की तुलना में बेहतर परिणाम देता है।

elm.offsetTopऔर elm.offsetLeftअक्सर गलत तरीके से सूचना दी जाती है, जिससे तत्वों की स्थिति को गलत पाया जा सकता है, यही वजह है कि बहुत सारे मामलों में पॉपअप तत्व आदि कुछ पिक्सेल बंद हैं।

यह भी ध्यान दें कि यदि किसी तत्व (या तत्व के माता-पिता) में से एक है display, noneतो IE 0फ़ायरफ़ॉक्स के रूप में लौटने के बजाय आकार / स्थिति विशेषताओं तक पहुंचने पर एक अपवाद बढ़ाएगा ।
स्क्रीन आकार प्राप्त करें ( स्क्रीन के देखने योग्य क्षेत्र):
- फ़ायरफ़ॉक्स: window.innerWidth/innerHeight
- IE मानक मोड: document.documentElement.clientWidth/clientHeight
- IE quirks मोड: document.body.clientWidth/clientHeight
दस्तावेज़ स्क्रॉल स्थिति / माउस स्थिति : यह वास्तव में w3c द्वारा परिभाषित नहीं है इसलिए फ़ायरफ़ॉक्स में भी गैर-मानक है। scrollLeft/ scrollTopका पता लगाने के लिए document:
- फ़ायरफ़ॉक्स और IE विचित्र मोड में: document.body.scrollLeft/scrollTop
- IE मानक मोड में: document.documentElement.scrollLeft/scrollTop
- नोट: कुछ अन्य ब्राउज़र pageXOffset/ pageYOffsetसाथ ही उपयोग करते हैं ।
```
function getDocScrollPos() {
 var x = document.body.scrollLeft ||
         document.documentElement.scrollLeft ||
         window.pageXOffset || 0,
     y = document.body.scrollTop ||
         document.documentElement.scrollTop ||
         window.pageYOffset || 0;
 return [x, y];
};
```
आदेश में माउस कर्सर की स्थिति को प्राप्त करने के लिए, evt.clientXऔर evt.clientYमें mousemoveघटनाओं दस्तावेज़ सापेक्ष स्थिति दे देंगे स्क्रॉल स्थिति को जोड़े बिना तो पिछले समारोह शामिल किया जा करने की आवश्यकता होगी:
```
var mousepos = [0, 0];
document.onmousemove = function(evt) {
 evt = evt || window.event;
 if (typeof evt.pageX != 'undefined') {
  // Firefox support
  mousepos = [evt.pageX, evt.pageY];
 } else {
  // IE support
  var scrollpos = getDocScrollPos();
  mousepos = [evt.clientX+scrollpos[0], evt.clientY+scrollpos[1]];
 };
};
```

चयन / पर्वतमाला:

<textarea>और <input>चयन : selectionStartऔर selectionEndIE में लागू नहीं कर रहे हैं, और इसकी जगह में एक मालिकाना "पर्वतमाला" प्रणाली है, प्रारंभ से वर्णों में, टेक्सारिया में कैरट स्थिति भी देखें ।
दस्तावेज़ में वर्तमान में चयनित पाठ प्राप्त करना:
- फ़ायरफ़ॉक्स: window.getSelection().toString()
- अर्थात: document.selection.createRange().text

आईडी द्वारा तत्व प्राप्त करना:

document.getElementByIdnameरूपों में विशेषता का भी उल्लेख कर सकते हैं (जो कि दस्तावेज़ में पहले परिभाषित किया गया है) इसलिए यह अलग-अलग तत्वों को नहीं करना सबसे अच्छा है जिनके पास समान है nameऔर id। यह उन दिनों की है जब idw3c मानक नहीं था। document.all( एक मालिकाना IE- विशिष्ट संपत्ति ) की तुलना में काफी तेज है document.getElementById, लेकिन इसमें अन्य समस्याएं हैं क्योंकि यह हमेशा nameपहले प्राथमिकता देता है id। मैं व्यक्तिगत रूप से इस कोड का उपयोग करता हूं, सुनिश्चित करने के लिए अतिरिक्त चेक के साथ वापस गिर रहा हूं:
```
function getById(id) {
 var e;
 if (document.all) {
  e = document.all[id];
  if (e && e.tagName && e.id === id) {
   return e;
  };
 };
 e = document.getElementById(id);
 if (e && e.id === id) {
  return e;
 } else if (!e) {
  return null;
 } else {
  throw 'Element found by "name" instead of "id": ' + id;
 };
};
```

केवल आंतरिक HTML पढ़ने में समस्याएँ:

आईई करता समर्थन नहीं के innerHTML की स्थापना col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, और trतत्वों। यहाँ एक फ़ंक्शन है जो तालिका से संबंधित तत्वों के लिए काम करता है:

function setHTML(elm, html) {
 // Try innerHTML first
 try {
  elm.innerHTML = html;
 } catch (exc) {
  function getElm(html) {
   // Create a new element and return the first child
   var e = document.createElement('div');
   e.innerHTML = html;
   return e.firstChild;
  };
  function replace(elms) {
   // Remove the old elements from 'elm'
   while (elm.children.length) {
    elm.removeChild(elm.firstChild);
   }
   // Add the new elements from 'elms' to 'elm'
   for (var x=0; x<elms.children.length; x++) {
    elm.appendChild(elms.children[x]);
   };
  };
  // IE 6-8 don't support setting innerHTML for
  // TABLE, TBODY, TFOOT, THEAD, and TR directly
  var tn = elm.tagName.toLowerCase();
  if (tn === 'table') {
   replace(getElm('<table>' + html + '</table>'));
  } else if (['tbody', 'tfoot', 'thead'].indexOf(tn) != -1) {
   replace(getElm('<table><tbody>' + html + '</tbody></table>').firstChild);
  } else if (tn === 'tr') {
   replace(getElm('<table><tbody><tr>' + html + '</tr></tbody></table>').firstChild.firstChild);
  } else {
   throw exc;
  };
 };
};

यह भी ध्यान दें कि IE का उपयोग करने से पहले उस तत्व में <tbody>एक जोड़ने के लिए आवश्यक है , उदाहरण के लिए:<table><tr><tbody>document.createElement

var table = document.createElement('table');
var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
var td = document.createElement('td');
table.appendChild(tbody);
tbody.appendChild(tr);
tr.appendChild(td);
// and so on

घटना के अंतर:

eventवैरिएबल प्राप्त करना : DOM इवेंट IE में फ़ंक्शंस के लिए पास नहीं होते हैं और जैसे ही पहुंच योग्य होते हैं window.event। घटना होने का एक सामान्य तरीका जैसे उपयोग करने के लिए है
elm.onmouseover = function(evt) {evt = evt||window.event}
करने के लिए जो चूक window.eventकरता है, तो evtअपरिभाषित है।
मुख्य ईवेंट कोड अंतर: मुख्य ईवेंट कोड बेतहाशा भिन्न होते हैं, हालांकि यदि आप क्विरक्समोड या जावास्क्रिप्ट पागलपन को देखते हैं , तो यह शायद ही IE के लिए विशिष्ट है, सफारी और ओपेरा फिर से अलग हैं।
माउस घटना मतभेद:button IE में विशेषता थोड़ा-ध्वज जो एक साथ कई माउस बटन की अनुमति देता है:
- वाम: 1 ( var isLeft = evt.button & 1)
- अधिकार: 2 ( var isRight = evt.button & 2)
- केंद्र: 4 ( var isCenter = evt.button & 4)
  
  डब्ल्यू 3 सी मॉडल (फ़ायरफ़ॉक्स द्वारा समर्थित) आईई मॉडल की तुलना में कम लचीला है, केवल एक ही बटन को एक बार बाईं ओर 0, दाईं ओर 2और केंद्र के रूप में अनुमति दी गई है 1। ध्यान दें, पीटर-पॉल कोच के रूप में , यह बहुत ही सहज ज्ञान युक्त है, जैसा कि 0आमतौर पर 'नो बटन' का अर्थ है।
  
  offsetXऔर offsetYकर रहे हैं समस्याग्रस्त और यह शायद उन्हें IE में से बचने के लिए सबसे अच्छा है। प्राप्त करने के लिए एक और अधिक विश्वसनीय तरीका offsetXऔर offsetYIE में होगा स्थिति प्राप्त अपेक्षाकृत तैनात तत्व की और से घटा दें clientXऔर clientY।
  
  यह भी ध्यान दें कि IE में एक clickघटना में एक डबल क्लिक करने के लिए आपको एक समारोह में एक clickऔर dblclickघटना दोनों को पंजीकृत करने की आवश्यकता होगी । फ़ायरफ़ॉक्स के clickरूप में अच्छी तरह से dblclickडबल क्लिक करते समय आग लग जाती है , इसलिए IE- विशिष्ट पहचान के समान व्यवहार की आवश्यकता होती है।
घटना में मतभेद से निपटने मॉडल: दोनों मालिकाना आईई मॉडल और नीचे से ऊपर की घटनाओं की फ़ायरफ़ॉक्स मॉडल समर्थन हैंडलिंग, जैसे देखते हैं अगर दोनों तत्वों में घटनाओं <div><span></span></div>तो घटनाओं में ट्रिगर किया जाएगा span तोdiv बजाए जो वे कर रहे हैं एक पारंपरिक उदाहरण elm.onclick = function(evt) {}का उपयोग किया गया था, तो बाध्य ।
"कैप्चर" इवेंट्स आम तौर पर केवल फ़ायरफ़ॉक्स आदि में समर्थित होते हैं, जो divतत्कालीन spanघटनाओं को टॉप डाउन ऑर्डर में ट्रिगर करेंगे । आईई है elm.setCapture()और elm.releaseCapture()तत्व (करने के लिए दस्तावेज़ से माउस की घटनाओं रीडायरेक्ट करने के लिए elmअन्य घटनाओं प्रक्रिया से पहले इस मामले में), लेकिन वे प्रदर्शन और अन्य मुद्दों के एक नंबर तो शायद बचा जाना चाहिए है।
- फ़ायरफ़ॉक्स:
  संलग्न करें : elm.addEventListener(type, listener, useCapture [true/false])
  अलग करें : elm.removeEventListener(type, listener, useCapture)
  ( typeजैसे 'mouseover'बिना on)
- IE: किसी तत्व पर दिए गए प्रकार की केवल एक घटना को IE में जोड़ा जा सकता है - यदि एक ही प्रकार की एक से अधिक घटना जोड़ी जाती है तो एक अपवाद उठाया जाता है। यह भी ध्यान दें कि ईवेंट फ़ंक्शंस में बाउंड एलिमेंट के बजाय यह thisसंदर्भित है window(इसलिए यह कम उपयोगी है):
  संलग्न करें : elm.attachEvent(sEvent, fpNotify)
  अलग करें : elm.detachEvent(sEvent, fpNotify)
  ( sEventउदाहरण के लिए 'onmouseover')
घटना विशेषता अंतर:
- किसी अन्य सुनने के कार्यों द्वारा संसाधित होने से घटनाओं को रोकें :
  फ़ायरफ़ॉक्स: evt.stopPropagation()
  IE: evt.cancelBubble = true
- वर्णों को सम्मिलित करने से महत्वपूर्ण घटनाओं को रोकें या चेकबॉक्स को चेक करने से रोकें:
  फ़ायरफ़ॉक्स: evt.preventDefault()
  आईई: evt.returnValue = false
  नोट: बस लौटने falseमें keydown, keypress, mousedown, mouseup, clickऔर resetभी डिफ़ॉल्ट नहीं कर पाएगा।
- उस तत्व को प्राप्त करें जिसने घटना को ट्रिगर किया है:
  फ़ायरफ़ॉक्स: evt.target
  IE: evt.srcElement
- तत्व को प्राप्त करना माउस कर्सर से दूर चला गया: evt.fromElement IE evt.targetमें फ़ायरफ़ॉक्स में है अगर एक onmouseoutघटना में, अन्यथाevt.relatedTarget
- तत्व को माउस कर्सर को ले जाना: यदि कोई घटना है, तो evt.toElementIE evt.relatedTargetमें फ़ायरफ़ॉक्स में हैonmouseoutevt.target
- नोट: evt.currentTarget (जिस तत्व को घटना बाध्य किया गया था) IE में कोई समकक्ष नहीं है।

— क्रायो
स्रोत

12

बहुत, बहुत, बहुत अच्छी सूची! हर किसी को योगदान के लिए धन्यवाद :)

— cwap

26

कॉमा के लिए भी चेक करें जैसे कि ये या समान यदि आपके कोड में है

var o={
'name1':'value1',
'name2':'value2',
}

अंतिम अल्पविराम (मान 2 के बाद) फ़ायरफ़ॉक्स द्वारा सहन किया जाएगा, लेकिन IE नहीं

— लुका रोची
स्रोत

1

अधिकांश अच्छे संपादकों को यह एक पकड़ना चाहिए

— सीनेजा

1

+1, मेरा यह एक बहुत बार था।

— डेविड वी।

1

अगर मैं कर सकता तो मैं तुम्हें +10 देता - मेरे लिए यह सब f'ing समय होता है।

— जोश

ओह और @ SeanJA की टिप्पणी में जोड़ने के लिए: मैंने हाल ही में NetBeans पर स्विच किया है जो इसे पकड़ता है।

— जोश

मैंने जेएस के कुछ काम करने के बाद पहली बार इतने घंटे खो दिए। अब पहली बात मैं जाँच करता हूँ! लानत गंदे टेक्स्टमेट विस्तार के आसपास अल्पविराम छोड़ रहा है।

— अगोस

12

यदि आप jQuery या YUI का उपयोग करने से चिपके रहते हैं क्योंकि आपकी पोस्ट टैग की गई है, तो आपको ब्राउज़रों के बीच कम से कम अंतर होना चाहिए ... यह वही है जो फ्रेमवर्क के लिए हैं, आपके लिए इन क्रॉस-ब्राउज़र अंतरों का ध्यान रखें।

एक उदाहरण के लिए, quirksmode DOM traversal पृष्ठ को देखें , इसके अनुसार IE ज्यादातर चीजों का समर्थन नहीं करता है ... जबकि सच है, फ्रेमवर्क करते हैं, उदाहरण के लिए IE IE का समर्थन नहीं करता है elem.childElementCount, लेकिन jQuery में: $(elem).children().size()यह मान प्राप्त करने के लिए काम करता है, हर ब्राउज़र में। आप पाएंगे कि लाइब्रेरी में कुछ ऐसे हैं जो 99% असमर्थित मामलों को ब्राउज़र में संभाल सकते हैं, कम से कम स्क्रिप्ट के साथ ... सीएसएस के साथ आपको लाइब्रेरी के लिए प्लग इन पर जाना पड़ सकता है, इसका एक सामान्य उदाहरण गोल कोनों को प्राप्त करना है। IE में काम कर रहा है ... क्योंकि यह इस तरह के लिए कोई सीएसएस समर्थन नहीं है।

यदि आप सीधे चीजों को करना शुरू करते हैं, जैसे कि document.XXX(thing), तो आप लाइब्रेरी में नहीं हैं, आप सीधे जावास्क्रिप्ट कर रहे हैं (यह सब जावास्क्रिप्ट है, लेकिन आपको बिंदु मिल जाता है :), और यह कैसे हो सकता है, इस पर निर्भर करते हुए मुद्दों का कारण नहीं हो सकता है उस विशेष कार्य को लागू करते समय आईई टीम नशे में थी।

IE के साथ आप कच्चे जावास्क्रिप्ट मुद्दों की तुलना में सही ढंग से आने वाली स्टाइल पर विफल होने की संभावना रखते हैं, कुछ पिक्सेल बंद कर देते हैं और उस तरह की चीज़, IE6 में बहुत अधिक होती है।

— निक क्रेवर
स्रोत

मैं अब बेहतर समझ रहा हूं। हां, मैंने भी सीधे तौर पर ऐसी बातें कीं। karlthorwald

— user89021

1

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

— सीनजा

10

getElementbyID IE में नाम विशेषता के खिलाफ भी मेल खाएगा, लेकिन अन्य ब्राउज़र नहीं, और IE जो भी पहले मिलेगा, का चयन करेगा।

उदाहरण:

<script>
 var foo = document.getElementById('bar');
</script>

....
<input name="bar" type="text" />  //IE will get this element
<span id="bar"> Hello, World! </span>  //FF,Safari,Chrome will get this element

— GSto
स्रोत

3

असभ्य होने के लिए खेद है, लेकिन IE वास्तव में बदसूरत है

— user89021

12

document.getElementByIdOrNameIGuessWhateverMan (आईडी);

— जूलियनआर

5

चीजों का भार है, लेकिन एक जाल मैं गिर गया था कि कई ब्राउज़रों ने बिना उद्धृत नामों के JSON को स्वीकार किया, जबकि ie6 और ie7 नहीं।

{ name: "Jakob" } // will often work, but not in ie6/ie7
{ "name": "Jakob" } // Better!

संपादित करें : स्पष्ट करने के लिए, यह केवल एक मुद्दा है जब वास्तविक JSON की आवश्यकता होती है, जैसा कि एक वस्तु शाब्दिक के विपरीत है। JSON ऑब्जेक्ट शाब्दिक सिंटैक्स का एक सबसेट है और इसका अर्थ डेटा एक्सचेंज प्रारूप (XML की तरह) है, यही वजह है कि इसे पिकर बनाया गया है।

— जेकब
स्रोत

2

ध्यान दें कि यह संदर्भ पर निर्भर करता है, एक ऑब्जेक्ट शाब्दिक ठीक है, JSON नहीं है ... लेकिन उदाहरण के लिए jQuery अपने नवीनतम रिलीज में सभी पर JSON को अमान्य नहीं होने देता है।

— निक Craver

मेरी नीचता नहीं ... लेकिन आपको दूसरों के लिए यह स्पष्ट करना चाहिए, फिर मुझ से +1।

— निक Craver

5

अलग जावास्क्रिप्ट समर्थन

IE 1.5 के बाद से जावास्क्रिप्ट में जोड़े गए एक्सटेंशन (अधिकांश) का समर्थन नहीं करता है।

1.6 में नया

सरणी तरीके - indexOf(), lastIndexOf(), every(), filter(), forEach(), map(),some()
for each ... in - संपत्ति के नामों के बजाय मूल्यों को पुनरावृत्त करता है।

1.7 में नया है

विनाशकारी कार्य - [a,b] = [1,2]
इटरेटर और जेनरेटर
let तथा yeild

1.8 में नया

ऐरे तरीके - reduce(),reduceRight()
कार्यों को परिभाषित करने के लिए शॉर्टकट।

इन चीजों में से कुछ को आपको चलाने के लिए जावास्क्रिप्ट की एक संस्करण संख्या निर्दिष्ट करने की आवश्यकता होती है (जो IE के तहत टूट जाएगा), लेकिन कुछ चीजें [1,2,3].indexOf(2)जैसे कि बड़ी बात नहीं लगती, जब तक आप इसे IE में चलाने की कोशिश नहीं करते।

— gnarf
स्रोत

1

आप यहाँ जिस जावास्क्रिप्ट के बारे में बात कर रहे हैं, वह मोज़िला का जावास्क्रिप्ट (टीएम) है, अधिक सामान्य अर्थों में जावास्क्रिप्ट नहीं। सभी ECMAScript कार्यान्वयन / जावास्क्रिप्ट इंजन (इस मामले में MS JScript) से मोज़िला के जावास्क्रिप्ट (TM) का अनुसरण करने की उम्मीद नहीं की जानी चाहिए। ECMAScript मानक है, जावास्क्रिप्ट (TM) नहीं, और जावास्क्रिप्ट (TM) जावास्क्रिप्ट नहीं है। मुझे उम्मीद है कि वह अर्थवान है।

— डग नबबिट

मेरे लिए समझ में आता है, लेकिन जावास्क्रिप्ट और JScript के बीच संगतता के बारे में एक सूत्र पर, मुझे लगा कि पहले से ही समझ में आ जाएगा :)

— gnarf

जब आप कहते हैं कि "IE 1.5 में से जावास्क्रिप्ट में जोड़े गए एक्सटेंशन (अधिकांश) का समर्थन नहीं करता है।", ऐसा लगता है कि आप कह रहे हैं कि मोज़िला का जावास्क्रिप्ट (टीएम) एक मानक है जिसका IE को पालन करना चाहिए, जब निश्चित रूप से यह नहीं है। आपको कम से कम कह सकते हैं मोज़िला जावास्क्रिप्ट या इस तरह ... अन्य ब्राउज़र काम destructuring, आदि जैसे ECMAScript के लिए मोज़िला एक्सटेंशन के सभी का समर्थन नहीं करते सवाल 'सबसे' के बीच मतभेद के बारे में था javascriptऔर (विशिष्ट कार्यान्वयन) JScript, नहीं के बीच मतभेद Mozilla JavaScript(TM)और JScript। यह दिखाना बेहतर हो सकता है कि IE ES से कहां विचलित होता है।

— डग नबबिट

3

आधुनिक ब्राउज़रों (उदाहरण, फ़ायरफ़ॉक्स) में जावास्क्रिप्ट के बीच प्रमुख अंतर CSS / / (X) HTML क्रॉस-ब्राउज़र में अंतर के पीछे उन्हीं कारणों को जिम्मेदार ठहराया जा सकता है। दिन में वापस कोई वास्तविक मानक नहीं था; आईई / नेटस्केप / ओपेरा ने अधिकांश युद्ध को लागू करते हुए एक टर्फ युद्ध लड़ा, लेकिन कुछ को छोड़ने के साथ-साथ एक दूसरे पर लाभ हासिल करने के लिए मालिकाना चश्मा बना दिया। मैं लंबाई पर जा सकता था, लेकिन IE8 की रिलीज़ को आगे छोड़ देता है: जावास्क्रिप्ट को वर्षों के लिए टाला / तिरछा किया गया था, और एफएफ के उदय और वेबकॉम की अवमानना के साथ, IE ने IE6 से अपने सीएसएस को आगे बढ़ाने पर ध्यान केंद्रित करने के लिए चुना। और मूल रूप से DOM सपोर्ट को पीछे छोड़ दिया। IE8 का DOM सपोर्ट IE6 हो सकता है, जो 2001 में लुढ़का .... इसलिए IE का DOM सपोर्ट आधुनिक ब्राउज़रों से लगभग एक दशक पीछे है। यदि आप विशेष रूप से एक लेआउट इंजन के लिए जावास्क्रिप्ट विसंगतियां हैं, तो आप सबसे अच्छी शर्त यह है कि हम उसी तरह से हमला करें जिस तरह से हमने सीएसएस समस्याओं पर लिया था; उस ब्राउज़र को लक्षित करना। इसका उपयोग न करें, अपने ब्राउज़र को सूँघने के लिए फ़ीचर डिटेक्शन का उपयोग करें / यह DOM सपोर्ट का स्तर है।

JScript, IE का ECMAScript का स्वयं का कार्यान्वयन नहीं है; JScript IE के नेटस्केप के जावास्क्रिप्ट का उत्तर था, जो दोनों ECMAScript से पहले अस्तित्व में आए।

जहाँ तक स्क्रिप्ट तत्व पर टाइप की विशेषताएँ हैं, वहाँ टाइप = "टेक्स्ट / जावास्क्रिप्ट" डिफ़ॉल्ट मानक (कम से कम HTML5 में) है, इसलिए आपको कभी भी एक प्रकार की विशेषता की आवश्यकता नहीं है जब तक कि आपकी स्क्रिप्ट जावास्क्रिप्ट नहीं है।

जहाँ तक IE IE का समर्थन नहीं कर रहा है भीतर ... HTML का आविष्कार IE द्वारा किया गया था और अभी भी एक DOM मानक नहीं है। अन्य ब्राउज़रों ने इसे अपनाया है क्योंकि यह उपयोगी है, यही वजह है कि आप इसे क्रॉस-ब्राउज़र का उपयोग कर सकते हैं। जहाँ तक गतिशील रूप से बदलती तालिकाओं के बारे में है, MSDN का कहना है कि "तालिकाओं द्वारा आवश्यक विशिष्ट संरचना के कारण, इनरटेक्स्ट और इनरएचटीएमएल केवल पढ़ने के लिए मेज और टीआर वस्तुओं के गुण होते हैं।" मुझे नहीं पता कि शुरू में यह कितना सच था, लेकिन स्पष्ट रूप से आधुनिक ब्राउज़रों ने टेबल-लेआउट की जटिलताओं से निपटने के दौरान इसका पता लगा लिया है।

मैं जावास्क्रिप्ट पर जेरेमी कीथ के डोम स्क्रिप्टिंग डगलस क्रॉकफोर्ड के जावास्क्रिप्ट पर पीपीके को पढ़ने की अत्यधिक सलाह देता हूं : अच्छे भाग और क्रिश्चियन हेलमैन की शुरुआती जावास्क्रिप्ट डोम स्क्रिप्टिंग और अजाक्स के साथ जावास्क्रिप्ट पर एक मजबूत समझ पाने के लिए।

जहां तक फ्रेमवर्क / लाइब्रेरी का सवाल है, अगर आपके पास जावास्क्रिप्ट पर मजबूत पकड़ नहीं है, तो आपको इनसे बचना चाहिए। 2 साल पहले मैं jQuery के जाल में गिर गया था, और जब मैं शानदार करतबों को खींचने में सक्षम था, तो मैंने कभी भी जावास्क्रिप्ट को ठीक से कोड करने के बारे में कोई लानत नहीं सीखी। Hindight में, jQuery एक दुष्ट भयानक DOM टूलकिट है, लेकिन मेरी असफलता को उचित क्लोजर, प्रोटोटाइपिकल इनहेरिटेंस, आदि सीखने में मेरी असफलता ने न केवल मेरे व्यक्तिगत ज्ञान को वापस सेट किया है, मेरा काम बहुत बड़ा प्रदर्शन हिट करना शुरू कर रहा है क्योंकि मेरे पास कोई सुराग नहीं था जो मैं कर रहा था।

जावास्क्रिप्ट ब्राउज़र की भाषा है; यदि आप क्लाइंट-साइड / फ्रंट-एंड इंजीनियर हैं, तो यह अत्यधिक महत्वपूर्ण है कि आप जावास्क्रिप्ट को कमांड करें। Node.js जावास्क्रिप्ट पूर्ण झुकाव ला रहा है, मैं देखता हूं कि इसके विकास में प्रतिदिन काफी प्रगति हुई है; सर्वर-साइड जावास्क्रिप्ट बहुत निकट भविष्य में एक मानक होगा। मैं इसका उल्लेख आगे इस बात पर जोर देने के लिए कर रहा हूं कि जावास्क्रिप्ट अब कितनी महत्वपूर्ण है और होगी।

जावास्क्रिप्ट रेल की तुलना में अधिक लहरें बनाने जा रही है।

हैप्पी स्क्रिप्टिंग!

— अल्बर्ट
स्रोत

2

अच्छा जवाब, हालाँकि मैं ब्राउज़र को सूँघने के लिए फीचर डिटेक्शन के उपयोग से सहमत नहीं हूँ; केवल उन सुविधाओं के समर्थन के लिए परीक्षण करने के लिए सुविधा पहचान का उपयोग करें । यह भी देखें कि फीचर डिटेक्शन में उदाहरण ब्राउजर डिटेक्शन नहीं है ।

— मार्सेल कोर्पेल जूल 25'10

हुंह। मैं आपकी असहमति से पूरी तरह सहमत हूं। उस पकड़ने के लिए धन्यवाद। मैं अभी भी एक जावास्क्रिप्ट n00b हूँ, लेकिन मेरे खेल में कोई शर्म नहीं है। "फ़ीचर-आधारित ब्राउज़र डिटेक्शन एक बहुत ही बुरा अभ्यास है जिसे हर कीमत पर टाला जाना चाहिए। स्ट्रेट फ़ीचर डिटेक्शन एक सबसे अच्छा अभ्यास है, और लगभग हर मामले में, ठीक वैसा ही है जैसा आपको चाहिए होगा।"

— अल्बर्ट जूल

2

कुछ देशी वस्तुओं को केवल पढ़ने के बिना ही ऐसा प्रतीत होता है (आप उन्हें लिख सकते हैं लेकिन इसका कोई प्रभाव नहीं है)। उदाहरण के लिए, एक सामान्य उन्नत जावास्क्रिप्ट Element, सिस्टम के तरीकों को ओवरराइड करके ऑब्जेक्ट का विस्तार करने पर आधारित है , कहते हैं, Element.prototype.appendChild () को एक बच्चे के नोड को अपग्रेड करने से अधिक करने के लिए - कहते हैं, इसे माता-पिता के डेटा से आरंभ करें। यह IE6 पर चुपचाप विफल हो जाएगा - नए के बजाय नए ऑब्जेक्ट पर मूल विधि को लागू किया जाएगा।

कुछ ब्राउज़र (मुझे अब याद नहीं है) HTML टैग्स के बीच की नई सूचियों को टेक्स्ट नोड मानते हैं, जबकि अन्य नहीं। तो चाइल्डनॉड्स (एन), नेक्स्टब्लिंग (), फ़र्स्ट चाइल्ड () और इस तरह का व्यवहार बहुत अलग होगा।

— एस एफ।
स्रोत

2

सरणियों और ऑब्जेक्ट शाब्दिक में ट्रेलिंग कॉमा एक समस्या हुआ करती थी, हाल ही में जाँच नहीं की गई है (जिसका अर्थ है IE8):

var a = [ 1, 2, 3, ];
var o = { a:1, b:2, c:3, };

इस तरह के स्ट्रक्चर्स सर्वर साइड बनाते समय यह कुछ अतिरिक्त कोड का कारण होगा।

— npup
स्रोत

2

मुझे आज सुबह एक बार मिला, एक सहकर्मी ने स्क्रिप्ट टैग को इस तरह सेट किया: <script type="application/javascript">क्योंकि उसके विचारधारा को "पाठ / जावास्क्रिप्ट" से पहले रखा गया था

लेकिन, यह पता चलता है कि IE "संपूर्ण स्क्रिप्ट को अनदेखा करता है यदि आप" एप्लिकेशन / जावास्क्रिप्ट "का उपयोग करते हैं, तो आपको" टेक्स्ट / जावास्क्रिप्ट "का उपयोग करने की आवश्यकता है

— katjones
स्रोत

जावास्क्रिप्ट सभी ब्राउज़रों में डिफ़ॉल्ट है, इसलिए केवल का उपयोग<script>

— Lauri

2

मुझे इंटरनेट एक्सप्लोरर के साथ दूसरे दिन एक अजीब विचित्रता मिली। मैं YUI का उपयोग कर रहा था, और आंतरिक HTML सेट करके एक टेबल बॉडी () की सामग्री को बदल रहा था

Y.one('#elementId').set('innerHTML', '<tr><td>Column 1</td></tr>');

यह सभी ब्राउज़रों में काम करेगा IE। मुझे आखिरकार पता चला कि आप IE में एक तालिका के आंतरिक HTML को बदल नहीं सकते हैं। मुझे YUI का उपयोग करके एक नोड बनाना था और फिर उस नोड को जोड़ना होगा।

var myNode = Y.node.create('<tr><td>Column 1</td></tr>');
Y.one('#elementId').append(myNode);

यह पता लगाने के लिए एक मजेदार था!

— जस्टिन
स्रोत

1

मुझे लगता है कि आपको इसे <tbody>टैग के साथ लपेटने की आवश्यकता है ।

— केसी चू जू

मूल कोड में, यह वास्तव में एक <tbody> टैग में लिपटा है। यह अभी भी मेरे दिमाग को उड़ा देता है कि IE को यह पसंद नहीं था। मुझे Microsoft के आधिकारिक डॉक्स में इस पर पढ़ना याद है, लेकिन मुझे अब लिंक नहीं मिल रहा है। माफ़ करना!

— जस्टिन

1

एफए पर सुचारू रूप से काम करते समय IE पर अतिरिक्त कॉमा और लापता कॉमा सामान्य समस्या हुआ करती थी।

— गहरा
स्रोत

1

IE लापता के बारे में बहुत सख्त है ";" आमतौर पर ऐसा है।

— Sam3k
स्रोत

मैं इनमें से कई को ढूंढता हूं, जबकि मैं अब jsLinting कर रहा हूं। एक महत्वपूर्ण बिंदु लगता है।

— user89021

1

क्या यह लायक है के लिए मैं बस में इस गंदा मुद्दा भर में आया है <IE9

आप इस तरह से कुछ HTML है:

<table><tr><td>some content...</td></tr></table>

और किसी कारण से (मेरे पास एक अच्छा था) आपको अंतिम समापन टीआर से पहले तालिका में सभी HTML को पुनः प्राप्त करने की आवश्यकता है जो आप इस तरह की कोशिश कर सकते हैं:

var tableHtml = document.getElementById('thetable').innerHTML;
var fragment = tableHtml.substring(0, tableHtml.lastIndexOf('</tr>'));

<IE9 यहां कुछ भी नहीं (-1) लौटाएगा क्योंकि टेबलहेटल वैरिएबल में सभी HTML टैग्स ऊपरी-आवरण वाले हैं और lastIndexOf केस संवेदी है। इसके आसपास जाने के लिए मुझे lastIndexOf से पहले एक toLowerCase () में फेंकना पड़ा।

— tomfumb
स्रोत

0

IE एक आधुनिक ब्राउज़र नहीं है और केवल ECMAScript का अनुसरण करता है।

— लूटना
स्रोत

0

आपने jQuery का उल्लेख किया है जो मैं सामान्य संदर्भ के लिए कम परिचित हूं, और विशेष रूप से प्रोटोटाइप के साथ, आईई में आरक्षित शब्दों / विधि के नामों के लिए एक चीज देखने योग्य है। मुझे पता है कि मुझे अक्सर क्या चीजें मिलती हैं:

someElement.appendChild(new Element('label',{ **for**: someInput.id }).update( someLabelText );

(नया तत्व (tagName, propertyHash) Protitype में नए तत्व कैसे बनाए जाते हैं)। IE में, for:होना चाहिए 'for':, क्योंकिfor एक आरक्षित शब्द है। जो पूरी तरह से समझ में आता है - लेकिन फायरफॉक्स इसे बर्दाश्त करेगा।

एक और उदाहरण:

someElement.wrap('div').addClassName('someClass')

( wrapप्रोटोटाइप में विधि एक तत्व को दूसरे में लपेटती है) - आईई में, टेक्सारेस पर, wrapएक संपत्ति है, औरElement.wrap() टेक्सारैस मेथडाइज़्ड संस्करण के बजाय इसका उपयोग किया जाना चाहिए

ये दो उदाहरण हैं जो मेरे अनुभव से समझ में आते हैं। वे प्रोटोटाइप पर आधारित हैं, लेकिन मुख्य मुद्दा यह नहीं है: किसी भी तरीके / लेबल / पहचानकर्ताओं के लिए देखें जो IE आरक्षित शब्दों पर विचार करता है लेकिन फायरफॉक्स या सफारी बर्दाश्त करेगा।

— जोश
स्रोत

0

तथ्य यह है कि IE जावास्क्रिप्ट का समर्थन नहीं करता है ... यह ECMAScript के अपने स्वयं के कार्यान्वयन का समर्थन करता है: JScript ... जो अलग तरह का है ...

— xavierm02
स्रोत

0

console.log()फ़ायरफ़ॉक्स त्रुटि कंसोल में आउटपुट आउटपुट त्रुटियों के लिए उपयोग करने से आपकी स्क्रिप्ट IE में विफल हो जाएगी। जब आप IE में परीक्षण करते हैं, तो उन्हें बाहर निकालने के लिए याद रखें।

— एरिक रोस
स्रोत

मेरा मानना है कि अगर आप FireBug चालू नहीं है, तो आप Firefox में भी फेल हो जाएंगे।

— 5