Firefox'ta geliştirilen Javascript’in IE’de başarısız olmasının tipik nedenleri nelerdir? [kapalı]

Son Firefox ve Safari'de sorunsuz çalışan bazı javascript gelişmiş sayfaları geliştirdim. Internet Explorer'ı kontrol etmeyi kaçırdım ve şimdi sayfaların IE 6 ve 7'de (şimdiye kadar) çalışmadığını görüyorum. Komut dosyaları bir şekilde yürütülmüyor, sayfalar javascript orada değilmiş gibi görünüyor, ancak bazı javascript yürütülüyor. YUI 2'den itibaren dom manipülasyonu ile kendi kitaplıklarını kullanıyorum, YUI-Loader ve XML-Http-Request kullanıyorum ve bir sayfada JQuery'ye bağlı olan "psupload" kullanıyorum.

Microsoft Script Editor'ı Office XP'den yüklüyorum ve şimdi hata ayıklayacağım. Şimdi özel testler de yazacağım.

EE'nin tipik başarısızlık noktaları nelerdir? Gözlerimi hangi yöne açık tutabilirim?

Bazı farklılıkları gösteren bu sayfayı buldum. ziyaret: Quirksmode

Deneyimlerinize göre, önce aramam gereken bazı tipik şeyleri sayabilir misiniz?

Ayrıca daha sonra belirli görevler için burada daha fazla soru soracağım, ancak şimdilik IE'nin Firefox'ta düzgün çalışan komut dosyalarında neden başarısız olduğunu deneyiminizle ilgileniyorum.

Düzenleme: Tüm bu harika cevaplar için teşekkür ederiz!

Bu arada, tüm kodu Internet Explorer ile de çalışacak şekilde uyarladım. JQuery'yi entegre ettim ve üstüne kendi sınıflarımı oluşturdum. Bu benim temel hatamdı, tüm öğelerimi en başından jQuery üzerinde oluşturmadım. Şimdi sahibim.

Ayrıca JSLint bana çok yardımcı oldu.

Ve farklı cevaplardan gelen tek tek sorunların çoğu yardımcı oldu.

Herhangi bir hata / eksiklik vb. Görürseniz lütfen bu listeyi güncellemekten çekinmeyin.

Not: IE9 aşağıdaki sorunların çoğunu düzeltir, bu nedenle bunların çoğu yalnızca IE8 ve altı ve belirli bir ölçüde tuhaflık modunda IE9 için geçerlidir. Örneğin, IE9 SVG destekler <canvas>, <audio>ve <video>doğal olarak, ancak gereken standartlara uygunluk modunu etkinleştirmek bunları kullanılabilir olması için.

Genel:

• Kısmen yüklenmiş belgelerle ilgili sorunlar:window.onload IE, kısmen yüklenmiş belgelerdeki birçok işlemi desteklemediğinden , JavaScript'inizi veya benzer bir olaya eklemek iyi bir fikirdir .

• Farklı özellikler : CSS'de, elm.style.styleFloatIE'de elm.style.cssFloatve Firefox'ta. Gelen <label>etiketleri fornitelik ile erişilen elm.htmlForIE vs elm.forFirefox'ta. Bunun forIE'de ayrıldığını ve bu nedenle elm['for']IE'nin bir istisna oluşturmasını engellemek için muhtemelen daha iyi bir fikir olduğunu unutmayın.

Temel JavaScript dili:

• Dizelerdeki karakterlere erişin : 'string'[0]Orijinal JavaScript özelliklerinde olmadığı için IE'de desteklenmez. Dizilerdeki öğelere erişmenin IE'de dizelerle kullanmaktan önemli ölçüde daha hızlı olduğunu kullanın 'string'.charAt(0)veya 'string'.split('')[0]not edin charAt( splitilk çağrıldığında bazı başlangıç ​​ek yükleri olsa da ).

• Nesnelerin sonundan önce virgül: örneğin {'foo': 'bar',}, IE'de izin verilmez.

Öğeye özgü sorunlar:

• Alma documentIFrame'i :

  • Firefox ve IE8 +: IFrame.contentDocument (IE bunu sürüm 8'den desteklemeye başladı .)
  • IE: IFrame.contentWindow.document
  • ( her iki tarayıcıdaki IFrame.contentWindowanlamına gelir window.)

• Canvas: IE9'dan önceki IE sürümleri <canvas>öğeyi desteklemez . IE, benzer bir teknoloji olan VML'yi destekler ve explorercanvas , <canvas>birçok işlem için öğeler için yerinde bir sarmalayıcı sağlayabilir . Standart uyumluluk modunda IE8'in, VML kullanılırken tuhaflık modunda olduğundan çok daha yavaş olduğunu ve çok daha fazla kusuru olduğunu unutmayın.

• SVG: IE9, SVG'yi yerel olarak destekler. IE6-8, SVG'yi destekleyebilir, ancak yalnızca JavaScript manipülasyonunu destekleyen eklentilerin yalnızca bazılarına sahip harici eklentilerle .

• <audio>ve <video>: yalnızca IE9'da desteklenir.

• Dinamik olarak radyo düğmeleri oluşturma: IE <8'de, işaretlenemez şekilde oluşturulan radyo düğmelerini yapan bir hata var document.createElement. Ayrıca bkz . Javascript'te tüm tarayıcılarda çalışan bir radyo düğmesini dinamik olarak nasıl oluşturursunuz? bunu aşmanın bir yolu için.

• JavaScript Gömülü <a href>etiketleri ve onbeforeunloadIE çatışmalar: JavaScript orada gömülü geçtiyse hrefbir parçası aetiketi (örn <a href="javascript: doStuff()">sonra IE hep dönen mesaj gösterecektir onbeforeunloadsürece onbeforeunloadişleyici önceden kaldırılır Ayrıca bkz. Bir sekmeyi kapatırken onaylamak için sor .

• <script>etiket etkinliği farklılıkları: onsuccess ve onerrorIE'de desteklenmez onreadystatechangeve indirmenin başarılı olup olmadığına bakılmaksızın tetiklenen bir IE'ye özgü ile değiştirilir . Daha fazla bilgi için JavaScript Madness'a da bakın .

Öğe boyutu / konumu / kaydırma ve fare konumu:

• Eleman boyutunu / konumunu alma : Elemanların genişliği / yüksekliği bazen elm.style.pixelHeight/Widthyerine IE'dedir elm.offsetHeight/Width, ancak IE'de özellikle tuhaflıklar modunda güvenilir değildir ve bazen biri diğerinden daha iyi sonuç verir.

  elm.offsetTopve elm.offsetLeftgenellikle yanlış rapor edilir, bu da öğelerin konumlarının yanlış bulunmasına yol açar, bu nedenle açılır öğeler vb. birçok durumda birkaç piksel uzaktadır.

  Ayrıca, bir öğenin (veya öğenin bir üst öğesinin) a değerine sahip displayolması nonedurumunda, IE'nin 0Firefox'taki gibi dönmek yerine boyut / konum özniteliklerine erişirken bir istisna oluşturacağını unutmayın .

• Ekran boyutunu alın (Ekranın görüntülenebilir alanını elde etme):

  • Firefox: window.innerWidth/innerHeight
  • IE standartları modu: document.documentElement.clientWidth/clientHeight
  • IE tuhaflık modu: document.body.clientWidth/clientHeight

• Belge kaydırma konumu / fare konumu : Bu aslında w3c tarafından tanımlanmadığından Firefox'ta bile standart değildir. Bulmak için scrollLeft/ scrollTopiçinde document:

  • Tuhaflıklar modunda Firefox ve IE: document.body.scrollLeft/scrollTop
  • Standartlar modunda IE: document.documentElement.scrollLeft/scrollTop

  • NOT: Diğer bazı tarayıcılar da pageXOffset/ kullanır 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];
    };

  Amacıyla fare imleci konumunu almak için, evt.clientXve evt.clientYde mousemoveolaylara belgeye konumunu verecek kaydırma konumunu eklemeden önceki işlev dahil edilmesi gerekecektir böylece:

  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]];
   };
  };

Seçimler / aralıkları:

• <textarea>ve <input>seçimler : selectionStartve selectionEndIE'de uygulanmaz ve bunun yerine tescilli bir "aralıklar" sistemi vardır, ayrıca baştan itibaren karakterlerde metin alanında Caret konumuna bakın .

• Belgede seçili olan metni alma:

  • Firefox: window.getSelection().toString()
  • IE: document.selection.createRange().text

Öğeleri kimliğe göre alma:

• document.getElementByIdnameformlardaki özniteliğe de başvurabilir (hangisinin belgede ilk olarak tanımlandığına bağlı olarak), bu nedenle, aynı nameve id. Bu id, w3c standardı olmadığı günlere kadar uzanıyor . document.all( tescilli bir IE'ye özgü mülk ), bundan önemli ölçüde daha hızlıdır document.getElementById, ancak daha nameönce her zaman öncelik verdiği gibi başka sorunları da vardır id. Şahsen bu kodu kullanıyorum ve emin olmak için ek kontrollerle geri dönüyorum:

  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;
   };
  };

Salt okunur innerHTML ile ilgili sorunlar:

• IE gelmez desteklemeyen innerHTML ayarı col, colGroup, frameSet, html, head, style, table, tBody, tFoot, tHead, title, ve tröğeleri. İşte tabloyla ilgili öğeler için bunun etrafında çalışan bir işlev:

  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;
    };
   };
  };

  Ayrıca IE ekleme gerektirir dikkat <tbody>a <table>eklemeden önce <tr>edilene s <tbody>kullanarak oluşturulurken elemanı document.createElement, örneğin:

  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

Olay farklılıkları:

• Alma eventdeğişkeni: DOM olayları IE fonksiyonlara geçti ve, erişilebilir durumdadır değildir window.event. Olayı elde etmenin yaygın bir yolu, örneğin tanımsız ise ,
  elm.onmouseover = function(evt) {evt = evt||window.event}
  varsayılan olanı kullanmaktır .window.eventevt

• Önemli olay kodu farklılıkları: Anahtar olay kodları çılgınca değişiklik gösterir, ancak Quirksmode veya JavaScript Madness'e bakarsanız, IE'ye özgü değildir, Safari ve Opera yine farklıdır.

• Fare olay farklılıkları:button IE özellik Aynı anda birden fazla fare düğmelerini izin veren bir bit bayrağı:

  • Sol: 1 ( var isLeft = evt.button & 1)
  • Sağ: 2 ( var isRight = evt.button & 2)

  • Merkez: 4 ( var isCenter = evt.button & 4)

    W3C modeli (Firefox tarafından desteklenir), IE modelinden daha az esnektir; solda 0, sağda 2ve ortada tek bir düğmeye aynı anda izin verilir 1. Peter-Paul Koch'un da belirttiği gibi, 0genellikle 'düğme yok' anlamına geldiğinden , bunun çok mantıksız olduğunu unutmayın .

    offsetXve offsetYolan sorunlu ve IE bunları önlemek için muhtemelen en iyisidir. Daha güvenilir bir şekilde elde etmek için offsetXve offsetYIE olacaktır pozisyon almak nispeten yerleştirilmiş öğenin ve onu çıkarmak clientXve clientY.

    Ayrıca IE a bir çift tıklama elde etmeyi unutmayın clickEğer a hem kayıt gerekiyordu olay clickve dblclickbir işleve olay. Firefox , çift tıkladığınızda clickolduğu gibi dblclickateşlenir, bu nedenle aynı davranışa sahip olmak için IE'ye özgü algılama gerekir.

• Olay farklılıklar işleme modeli: varsa tescilli IE model ve aşağıdan yukarıya doğru olayların Firefox modeli destek işleme Hem mesela her iki öğesine olaylar <div><span></span></div>ardından olaylarda tetikleyecek span sonradiv onlar konum ziyade düzeni geleneksel örneğin elm.onclick = function(evt) {}kullanılmışsa bağlı.

  "Yakalama" olayları genellikle yalnızca Firefox'ta vb. Desteklenir ve bu div, spanolayları yukarıdan aşağı bir sırada tetikler . IE sahiptir elm.setCapture()ve elm.releaseCapture()(elemana belgeden fare olayları yeniden yönlendirmek için elmdiğer olayları işlemeden önce bu durumda), ancak performans ve diğer konularda bir dizi bu yüzden muhtemelen kaçınılmalıdır var.

  • Firefox:

    Ekle : elm.addEventListener(type, listener, useCapture [true/false])
    Çıkar : elm.removeEventListener(type, listener, useCapture)
    ( typeörneğin, 'mouseover'olmadan on)

  • IE: IE'de bir elemana belirli bir türde yalnızca tek bir olay eklenebilir - aynı türden birden fazla olay eklenirse bir istisna ortaya çıkar. Ayrıca , olay işlevlerinde ilişkili öğeden ziyade thisatıfta bulunduğunu unutmayın window(bu nedenle daha az kullanışlıdır):

    Ekle : elm.attachEvent(sEvent, fpNotify)
    Çıkar : elm.detachEvent(sEvent, fpNotify)
    ( sEventör. 'onmouseover')

• Etkinlik özniteliği farklılıkları:

  • Olayların diğer dinleme işlevleri tarafından işlenmesini durdurun :

    Firefox: evt.stopPropagation()
    IE: evt.cancelBubble = true

  • Örneğin, önemli olayların karakter eklemesini veya onay kutularının işaretlenmesini durdurmasını durdurun:

    Firefox: evt.preventDefault()
    IE: evt.returnValue = false
    Not: Sadece dönen falseiçinde keydown, keypress, mousedown, mouseup, clickve resetayrıca varsayılan önleyecektir.

  • Etkinliği tetikleyen öğeyi alın:

    Firefox: evt.target
    IE: evt.srcElement

  • Öğeyi alma, fare imlecinin uzaklaştığı: evt.fromElement IE'de, bir evt.targetolaydaysa Firefox'ta onmouseout, aksi haldeevt.relatedTarget

  • Öğeyi alma fare imlecinin taşınması: evt.toElement IE'de evt.relatedTargetFirefox'ta, bir onmouseoutolaydaysa, aksi haldeevt.target

  • Not: evt.currentTarget (olayın bağlı olduğu öğenin) IE'de eşdeğeri yoktur.

Kodunuzda varsa bunlar veya benzeri virgüller için de kontrol edin

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

son virgül (aşağıdaki değer2) Firefox tarafından tolere edilir, ancak IE değil

Gönderiniz etiketlenirken jQuery veya YUI kullanmaya devam ederseniz, tarayıcılar arasında minimum farkınız olmalıdır ... sizin için bu tarayıcılar arası farklılıkların üstesinden gelmek için çerçeveler bunun içindir.

Bir örnek için, ilginç mod DOM geçiş sayfasına bakın , buna göre IE çoğu şeyi desteklemiyor ... doğruyken çerçeveler, örneğin IE desteklemiyor elem.childElementCount, ancak jQuery'de: $(elem).children().size()bu değeri elde etmeye çalışıyor, her tarayıcıda. Kütüphanede, tarayıcılarda desteklenmeyen vakaların% 99'unu ele alacak bir şey bulacaksınız, en azından komut dosyasıyla ... CSS ile kütüphane için eklentilere geçmeniz gerekebilir, bunun yaygın bir örneği köşeleri yuvarlatmaktır IE'de çalışıyor ... çünkü böyle bir CSS desteği yok.

Bununla birlikte, bir şeyleri doğrudan yapmaya başlarsanız, örneğin document.XXX(thing), kütüphanede değilsiniz, doğrudan javascript yapıyorsunuz (hepsi javascript, ama anlıyorsunuz :) ve bu, nasıl yapılacağına bağlı olarak sorunlara neden olabilir veya olmayabilir. IE ekibi bu belirli işlevi yerine getirirken sarhoştu.

IE ile şekillendirme konusunda ham javascript sorunları, birkaç piksel kapalı animasyonlar ve bu tür şeyler, tabii ki IE6'da çok daha fazla olmaktan daha doğru ortaya çıkan stillerde başarısız olma olasılığınız daha yüksektir .

getElementbyID ayrıca IE'deki name özniteliğiyle eşleşecek, ancak diğer tarayıcılarda eşleşmeyecektir ve IE hangisini ilk bulduğunu seçecektir.

misal:

<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

Bir sürü şey var, ancak benim düştüğüm bir tuzak, birçok tarayıcının JSON'u alıntı isimler olmadan kabul ederken ie6 ve ie7'nin kabul etmemesiydi.

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

Düzenleme : Açıklığa kavuşturmak için, bu yalnızca bir nesne değişmezinin aksine gerçek JSON gerektiğinde bir sorundur. JSON, nesne değişmez sözdiziminin bir alt kümesidir ve bir veri alışveriş formatı (XML gibi) anlamına gelir, bu nedenle daha iyi olacak şekilde tasarlanmıştır.

Farklı JavaScript Desteği

IE, 1.5'ten beri JavaScript'e eklenen uzantıların çoğunu desteklemiyor.

1.6 sürümündeki yenilikler

• Dizi Yöntemleri - indexOf(), lastIndexOf(), every(), filter(), forEach(), map(),some()
• for each ... in - özellik adları yerine değerleri yineler.

1.7 sürümündeki yenilikler

• Yıkıcı görev - [a,b] = [1,2]
• Yineleyiciler ve Oluşturucular
• letve constifadeler
• dizi anlayışları

1.8 sürümündeki yenilikler

• Dizi Yöntemleri - reduce(),reduceRight()
• Fonksiyonları tanımlamak için kısayollar.

Bunlardan bazıları, altında çalıştırılacak bir JavaScript sürümü numarası belirlemenizi gerektirir (bu, IE altında kırılır), ancak [1,2,3].indexOf(2)IE'de çalıştırmayı deneyene kadar, bu gibi bazı şeyler o kadar önemli görünmeyebilir.

IE'deki JavaScript ile modern tarayıcılardaki (örn. Firefox) JavaScript arasındaki temel farklar, CSS / (X) HTML çapraz tarayıcısındaki farklılıkların arkasındaki aynı nedenlere bağlanabilir. O günlerde fiili bir standart yoktu; IE / Netscape / Opera, teknik özelliklerin çoğunu uygulayarak, aynı zamanda bazılarını atlayarak ve birbirlerine göre avantajlar elde etmek için özel özellikler oluşturarak bir çim savaşı yaptı. Uzun uzadıya devam edebilirim, ancak IE8'in yayınlanmasına geçelim: JavaScript yıllarca önlendi / küçüldü ve FF'nin yükselişi ve webcomm'un küçümsemesiyle IE, CSS'lerini IE6'dan itibaren ilerletmeye odaklanmayı seçti. Ve temelde DOM desteğini geride bıraktı. IE8'in DOM desteği, 2001'de kullanıma sunulan IE6'lar da olabilir ... bu nedenle IE'nin DOM desteği, modern tarayıcıların neredeyse on yıl gerisindedir. Bir düzen motoruna özgü JavaScript tutarsızlıkları yaşıyorsanız, en iyisi ona CSS sorunlarıyla aynı şekilde saldırmaktır; O tarayıcıyı hedeflemek. TARAYICI SNIFFING KULLANMAYIN, tarayıcınızı / DOM desteği seviyesini tespit etmek için özellik algılamayı kullanın.

JScript, IE'nin kendi ECMAScript uygulaması değildir; JScript, IE'nin her ikisi de ECMAScript'ten önce ortaya çıkan Netscape JavaScript'ine cevabıydı.

Komut dosyası öğesindeki tür özniteliklerine gelince, type = "text / javascript" varsayılan standarttır (en azından HTML5'te), bu nedenle komut dosyanız JavaScript değilse hiçbir zaman bir type özniteliğine ihtiyacınız olmaz.

IE, innerHTML'yi desteklemediğine göre ... innerHTML IE tarafından icat edildi ve bugün hala bir DOM standardı DEĞİLDİR. Diğer tarayıcılar, yararlı olduğu için benimsemiştir, bu yüzden tarayıcılar arası kullanabilirsiniz. Dinamik olarak değişen tablolarla ilgili olarak MSDN, "tabloların gerektirdiği belirli yapı nedeniyle, tablonun innerText ve innerHTML özellikleri ve tr nesnelerinin salt okunur olduğunu" söylüyor . Başlangıçta bunun ne kadarının doğru olduğunu bilmiyorum, ancak açıkça modern tarayıcılar bunu tablo düzeninin karmaşıklığıyla uğraşırken anladılar.

JavaScript konusunda güçlü bir kavrayış elde etmek için JavaScript Jeremy Keith'in DOM Scripting Douglas Crockford JavaScript: The Good Parts ve Christian Hellman Beginning JavaScript with DOM Scripting ve Ajax'ta PPK okumanızı şiddetle tavsiye ederim .

Çerçeveler / Kitaplıklar söz konusu olduğunda, JavaScript konusunda henüz güçlü bir kavrayışınız yoksa, bunlardan kaçınmalısınız. 2 yıl önce jQuery tuzağına düştüm ve muhteşem başarılar elde ederken, JavaScript'i doğru şekilde kodlamakla ilgili hiçbir şey öğrenmedim. Geriye dönüp baktığımızda, jQuery harika bir DOM Toolkit'tir, ancak doğru kapanışları, prototip kalıtımı vb. Öğrenmedeki başarısızlığım, sadece kişisel bilgilerimi geri getirmekle kalmadı, işim büyük performans hitleri almaya başladı çünkü ne yaptığımla ilgili hiçbir fikrim yoktu.

JavaScript, tarayıcının dilidir; İstemci tarafı / ön uç mühendisi iseniz, JavaScript'e komut vermeniz çok önemlidir. Node.js JavaScript'i tam tilt getiriyor, gelişiminde günlük olarak büyük adımlar atıldığını görüyorum; Sunucu tarafı JavaScript, çok yakın gelecekte bir standart olacak. Bundan JavaScript'in şu anda ne kadar önemli olduğunu ve olacağını daha da vurgulamak için bahsediyorum.

JavaScript, Rails'den daha fazla dalga yaratacak.

Mutlu Senaryolar!

Bazı yerel nesneler, gerçekten öyle görünmeden salt okunurdur (onlara yazabilirsiniz ama hiçbir etkisi yoktur). Örneğin, yaygın bir gelişmiş javascript, Elementsistem yöntemlerini geçersiz kılarak nesneyi genişletmeye dayanır , örneğin, Element.prototype.appendChild () öğesini bir alt düğüm eklemekten daha fazlasını yapmak için değiştirerek - örneğin, ebeveynin verileriyle başlatın. Bu, IE6'da sessizce başarısız olacaktır - orijinal yöntem, yenisi yerine yeni nesnelerde çağrılacaktır.

Bazı tarayıcılar (şimdi hangisini hatırlamıyorum) HTML etiketleri arasındaki yeni satırları metin düğümleri olarak kabul ederken, diğerleri bunu yapmıyor. Yani childNodes (n), nextSibling (), firstChild () ve benzerleri çok farklı davranacaktır.

Dizilerdeki son virgül ve nesne değişmez değerleri bir problemdi, yakın zamanda kontrol edilmedi (yani IE8):

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

Bu, sunucu tarafında bu tür yapıları oluştururken bazı ekstra koda neden olur.

Daha bu sabah bir tane buldum, bir iş arkadaşım komut dosyası etiketini şu şekilde ayarladı: <script type="application/javascript">çünkü ide otomatik tamamlamasında "text / javascript" den önce vardı

Ancak, "uygulama / javascript" kullanıyorsanız, IE'nin komut dosyasının tamamını yok saydığı ortaya çıkıyor, "metin / javascript" kullanmanız gerekiyor

Geçen gün Internet Explorer ile garip bir tuhaflık buldum. YUI kullanıyordum ve iç HTML'yi ayarlayarak bir tablo gövdesinin () içeriğini değiştiriyordum

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

Bu, IE HARİÇ tüm tarayıcılarda çalışır. Sonunda IE'de bir tablonun iç HTML'sini değiştiremeyeceğinizi keşfettim. YUI kullanarak bir düğüm oluşturmam ve ardından bu düğümü eklemem gerekiyordu.

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

Bunu anlamak eğlenceliydi!

Ekstra virgüller ve eksik virgüller, FF'de sorunsuz bir şekilde çalışırken IE'de olağan bir sorundu.

IE, ";" kaçırma konusunda çok katıdır genellikle böyledir.

Ne olursa olsun <IE9'da bu çirkin sorunla karşılaştım

bunun gibi bir html'niz olduğunu söyleyin:

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

ve bazı nedenlerden dolayı (iyi bir tane vardı) son kapanış TR'den önce tablodaki tüm HTML'yi almanız gerekiyor, bunun gibi bir şey deneyebilirsiniz:

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

<IE9 burada hiçbir şey (-1) döndürmez çünkü tableHtml değişkeni tüm html etiketlerini büyük harfli içerir ve lastIndexOf büyük / küçük harfe duyarlıdır. Bunu aşmak için lastIndexOf'dan önce bir toLowerCase () eklemek zorunda kaldım.

IE modern bir tarayıcı değildir ve sadece ECMAScript'i gevşek bir şekilde takip eder.

Daha az aşina olduğum jQuery'den bahsettiniz, ancak genel referans için ve özellikle Prototype ile, dikkat edilmesi gereken bir şey, IE'de ayrılmış kelimeler / yöntem adlarıdır. Beni sık sık anlayan şeyin şunlar olduğunu biliyorum:

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

(yeni Öğe (etiketAdı, özellikHash), Protitype'de yeni öğelerin nasıl oluşturulduğudur). IE'de for:olmalı 'for':, çünkü forayrılmış bir kelimedir. Bu tamamen mantıklı - ancak FireFox bunu tolere edecek.

Başka bir örnek:

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

( wrapPrototip'teki yöntem, bir öğeyi diğerine sarar) - IE'de, metin alanlarında, wrapbir özelliktir ve Element.wrap()yöntemli sürüm yerine kullanılmalıdır

Bunlar benim deneyimlerimden akla gelen iki örnek. Prototipe dayanıyorlar, ancak temel sorun şu değil: IE'nin ayrılmış sözcükler olarak kabul ettiği ancak FireFox veya Safari'nin tolerans göstereceği yöntemlere / etiketlere / tanımlayıcılara dikkat edin.

Gerçek şu ki, IE JavaScript'i desteklemiyor ... Kendi ECMAScript: JScript uygulamasını destekliyor ... ki bu biraz farklı ...

console.log()Hataları Firefox hata konsoluna göndermek için kullanmak , komut dosyalarınızın IE'de başarısız olmasına neden olur. IE'de test ederken bunları çıkarmayı unutmamalıyım.