Apa alasan umum Javascript yang dikembangkan di Firefox gagal di IE? [Tutup]

Saya mengembangkan beberapa halaman yang ditingkatkan javascript yang berfungsi dengan baik di Firefox dan Safari terbaru. Saya melewatkan untuk memeriksa di Internet Explorer, dan sekarang saya menemukan halaman tidak berfungsi di IE 6 dan 7 (sejauh ini). Skrip entah bagaimana tidak dieksekusi, halaman ditampilkan seolah-olah javascript tidak ada, meskipun beberapa javascript dijalankan. Saya menggunakan perpustakaan sendiri dengan manipulasi dom, dari YUI 2 saya menggunakan YUI-Loader dan XML-Http-Request, dan pada satu halaman saya menggunakan "psupload", yang bergantung pada JQuery.

Saya menginstal Microsoft Script Editor dari Office XP dan sekarang akan melakukan debug. Saya juga akan menulis tes khusus sekarang.

Apa saja poin kegagalan khas IE? Ke arah mana saya bisa tetap membuka mata.

Saya menemukan halaman ini, yang menunjukkan beberapa perbedaan. kunjungi: Quirksmode

Dapatkah Anda dari pengalaman Anda menyebutkan beberapa hal khas yang harus saya cari terlebih dahulu?

Saya juga akan mengajukan lebih banyak pertanyaan di sini untuk tugas tertentu nanti, tetapi untuk saat ini saya tertarik dengan pengalaman Anda mengapa IE biasanya gagal pada skrip yang berjalan dengan baik di Firefox

Edit: Terima kasih atas semua jawaban bagus itu!

Sementara itu, saya telah mengadaptasi seluruh kode agar dapat bekerja dengan Internet Explorer. Saya mengintegrasikan jQuery dan membangun kelas saya sendiri di atasnya sekarang. Ini adalah kesalahan dasar saya, bahwa saya tidak membangun semua barang saya di jQuery sejak awal. Sekarang saya punya.

JSLint juga banyak membantu saya.

Dan banyak masalah tunggal dari jawaban yang berbeda membantu.

Silakan memperbarui daftar ini jika Anda melihat kesalahan / kelalaian, dll.

Catatan: IE9 memperbaiki banyak masalah berikut, jadi banyak dari ini hanya berlaku untuk IE8 dan di bawahnya dan sampai batas tertentu IE9 dalam mode quirks. Misalnya, IE9 mendukung SVG, <canvas>, <audio>dan <video>native, namun Anda harus mengaktifkan modus kepatuhan standar bagi mereka untuk menjadi tersedia.

Umum:

• Masalah dengan dokumen yang dimuat sebagian: Sebaiknya tambahkan JavaScript Anda di acara window.onloadatau yang serupa karena IE tidak mendukung banyak operasi dalam dokumen yang dimuat sebagian.

• Atribut yang berbeda : Di CSS, ada elm.style.styleFloatdi IE vs elm.style.cssFloatdi Firefox. Di <label>tag, foratribut diakses dengan elm.htmlFordi IE vs elm.fordi Firefox. Catatan yang fordicadangkan di IE jadi elm['for']mungkin ide yang lebih baik untuk menghentikan IE mengajukan pengecualian.

Bahasa JavaScript dasar:

• Akses karakter dalam string : 'string'[0]tidak didukung di IE karena tidak ada dalam spesifikasi JavaScript asli. Gunakan 'string'.charAt(0)atau 'string'.split('')[0]catat bahwa mengakses item dalam array jauh lebih cepat daripada menggunakan charAtstring di IE (meskipun ada beberapa overhead awal saat splitdipanggil pertama kali.)

• Koma sebelum akhir objek: mis. {'foo': 'bar',}Tidak diizinkan di IE.

Masalah khusus elemen:

• Mendapatkan documentdari sebuah IFrame :

  • Firefox dan IE8 +: IFrame.contentDocument (IE mulai mendukung ini dari versi 8 )
  • YAITU: IFrame.contentWindow.document
  • ( IFrame.contentWindowmengacu pada windowdi kedua browser.)

• Kanvas: Versi IE sebelum IE9 tidak mendukung <canvas>elemen. IE memang mendukung VML yang merupakan teknologi serupa, dan explorercanvas dapat menyediakan pembungkus di tempat untuk <canvas>elemen untuk banyak operasi. Ketahuilah bahwa IE8 dalam mode kepatuhan standar berkali-kali lebih lambat dan memiliki lebih banyak gangguan daripada saat dalam mode quirks saat menggunakan VML.

• SVG: IE9 mendukung SVG secara native. IE6-8 dapat mendukung SVG, tetapi hanya dengan plugin eksternal dengan hanya beberapa plugin yang mendukung manipulasi JavaScript.

• <audio>dan <video>: hanya didukung di IE9.

• Membuat tombol radio secara dinamis: IE <8 memiliki bug yang membuat tombol radio dibuat dengan tidak dapat document.createElementdicentang. Lihat juga Bagaimana Anda secara dinamis membuat tombol radio di Javascript yang berfungsi di semua browser? untuk cara menyiasatinya.

• JavaScript<a href>onbeforeunload yang disematkan di tag dan konflik di IE: Jika ada JavaScript yang disematkan di hrefbagian atag (misalnya, <a href="javascript: doStuff()">IE akan selalu menampilkan pesan yang dikembalikan dari onbeforeunloadkecuali onbeforeunloadpenangan dihapus sebelumnya. Lihat juga Minta konfirmasi saat menutup tab .

• <script>perbedaan peristiwa tag: onsuccess dan onerrortidak didukung di IE dan diganti dengan khusus IE onreadystatechangeyang diaktifkan terlepas dari apakah unduhan berhasil atau gagal. Lihat juga JavaScript Madness untuk info lebih lanjut.

Ukuran / posisi elemen / scrolling dan posisi mouse:

• Mendapatkan ukuran / posisi elemen : lebar / tinggi elemen terkadang ada elm.style.pixelHeight/Widthdi IE, bukanelm.offsetHeight/Width , tetapi keduanya tidak dapat diandalkan di IE, terutama dalam mode quirks, dan terkadang salah satu memberikan hasil yang lebih baik daripada yang lain.

  elm.offsetTopdan elm.offsetLeftsering salah dilaporkan, yang menyebabkan menemukan posisi elemen yang salah, itulah sebabnya elemen munculan, dll., beberapa piksel tidak aktif dalam banyak kasus.

  Perhatikan juga bahwa jika suatu elemen (atau induk dari elemen) memiliki displaydari nonemaka IE akan memunculkan pengecualian saat mengakses atribut ukuran / posisi daripada mengembalikan 0seperti yang dilakukan Firefox.

• Dapatkan ukuran layar (Mendapatkan area layar yang dapat dilihat):

  • Firefox: window.innerWidth/innerHeight
  • Mode standar IE: document.documentElement.clientWidth/clientHeight
  • Mode quirks IE: document.body.clientWidth/clientHeight

• Posisi gulir dokumen / posisi mouse : Yang ini sebenarnya tidak ditentukan oleh w3c sehingga tidak standar bahkan di Firefox. Untuk menemukan scrollLeft/ scrollTopdari document:

  • Firefox dan IE dalam mode quirks: document.body.scrollLeft/scrollTop
  • IE dalam mode standar: document.documentElement.scrollLeft/scrollTop

  • CATATAN: Beberapa browser lain menggunakan pageXOffset/ pageYOffsetjuga.

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

  Untuk mendapatkan posisi kursor mouse, evt.clientXdan evt.clientYdalam mousemoveacara akan memberikan posisi relatif terhadap dokumen tanpa menambahkan posisi gulir sehingga fungsi sebelumnya perlu dimasukkan:

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

Pilihan / rentang:

• <textarea>dan <input>pilihan : selectionStartdan selectionEndtidak diterapkan di IE, dan ada sistem "rentang" berpemilik sebagai gantinya, lihat juga posisi Caret di textarea, dalam karakter dari awal .

• Mendapatkan teks yang sedang dipilih dalam dokumen:

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

Mendapatkan elemen berdasarkan ID:

• document.getElementByIddapat juga merujuk ke nameatribut dalam formulir (tergantung mana yang didefinisikan pertama kali dalam dokumen) jadi sebaiknya tidak memiliki elemen berbeda yang memiliki namedan id. Ini tanggal kembali ke hari-hari ketika idbukan standar w3c. document.all( properti khusus IE berpemilik ) secara signifikan lebih cepat daripada document.getElementById, tetapi memiliki masalah lain seperti yang selalu diprioritaskan namesebelumnya id. Saya pribadi menggunakan kode ini, mundur dengan pemeriksaan tambahan hanya untuk memastikan:

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

Masalah dengan innerHTML hanya baca:

• IE tidak tidak mendukung pengaturan innerHTML dari col, colGroup, frameSet, html, head, style, table, tBody, tFoot,tHead , title, dan trunsur-unsur. Berikut adalah fungsi yang mengatasinya untuk elemen terkait tabel:

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

  Perhatikan juga bahwa IE memerlukan penambahan a <tbody>ke a <table>sebelum menambahkan <tr>s ke <tbody>elemen tersebut saat membuat menggunakan document.createElement, misalnya:

  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

Perbedaan acara:

• Mendapatkan eventvariabel: Peristiwa DOM tidak diteruskan ke fungsi di IE dan dapat diakses sebagai window.event. Salah satu cara umum untuk mendapatkan acara tersebut adalah dengan menggunakan misalnya
  elm.onmouseover = function(evt) {evt = evt||window.event}
  yang defaultnya window.eventjika evttidak ditentukan.

• Perbedaan kode peristiwa utama: Kode peristiwa utama sangat bervariasi, meskipun jika Anda melihat Quirksmode atau JavaScript Madness , hampir tidak spesifik untuk IE, Safari dan Opera berbeda lagi.

• Perbedaan acara mouse: thebutton atribut di IE adalah bit-flag yang memungkinkan beberapa tombol mouse sekaligus:

  • Kiri: 1 ( var isLeft = evt.button & 1)
  • Baik: 2 ( var isRight = evt.button & 2)

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

    Model W3C (didukung oleh Firefox) kurang fleksibel dibandingkan model IE, dengan hanya satu tombol yang diperbolehkan sekaligus dengan kiri sebagai 0, kanan sebagai 2dan tengah sebagai1 . Perhatikan bahwa, seperti yang disebutkan oleh Peter-Paul Koch , ini sangat kontra-intuitif, yang 0biasanya berarti 'tidak ada tombol'.

    offsetXdan offsetYyang bermasalah dan itu mungkin yang terbaik untuk menghindari mereka di IE. Cara yang lebih dapat diandalkan untuk mendapatkan offsetXdan offsetYdi IE adalah dengan mendapatkan posisi elemen yang diposisikan secara relatif dan menguranginya dari clientXdan clientY.

    Perhatikan juga bahwa di IE untuk mendapatkan klik dua kali clickjika Anda perlu mendaftarkan acara clickdan dblclickacara ke suatu fungsi. Kebakaran Firefox clicksertadblclick saat mengklik dua kali, jadi diperlukan deteksi khusus IE untuk memiliki perilaku yang sama.

• Perbedaan dalam model penanganan peristiwa: Baik model IE berpemilik dan model Firefox mendukung penanganan peristiwa dari bawah ke atas, misalnya jika ada peristiwa di kedua elemen <div><span></span></div>maka peristiwa akan dipicu saat span itu juga. yang divbukan urutan yang mereka terikat jika misalnya tradisional elm.onclick = function(evt) {}digunakan.

  "Capture" peristiwa umumnya hanya didukung di Firefox dll, yang akan memicu divmaka spanperistiwa di top down order. IE memiliki elm.setCapture()dan elm.releaseCapture()untuk mengarahkan peristiwa mouse dari dokumen ke elemen ( elmdalam hal ini) sebelum memproses peristiwa lain, tetapi mereka memiliki sejumlah kinerja dan masalah lain sehingga mungkin harus dihindari.

  • Firefox:

    Lampirkan : elm.addEventListener(type, listener, useCapture [true/false])
    Lepaskan : elm.removeEventListener(type, listener, useCapture)
    ( typemisalnya 'mouseover'tanpa on)

  • IE: Hanya satu peristiwa dari jenis tertentu pada suatu elemen yang dapat ditambahkan di IE - pengecualian dimunculkan jika lebih dari satu peristiwa dengan jenis yang sama ditambahkan. Perhatikan juga bahwa thismerujuk ke windowdaripada elemen terikat dalam fungsi acara (jadi kurang berguna):

    Lampirkan : elm.attachEvent(sEvent, fpNotify)
    Lepaskan : elm.detachEvent(sEvent, fpNotify)
    ( sEventmis. 'onmouseover')

• Perbedaan atribut acara:

  • Hentikan acara agar tidak diproses oleh fungsi mendengarkan lainnya :

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

  • Hentikan misalnya peristiwa penting dari memasukkan karakter atau menghentikan kotak centang agar tidak diperiksa:

    Firefox: evt.preventDefault()
    IE: evt.returnValue = false
    Catatan: Hanya kembali falsedi keydown, keypress, mousedown, mouseup, clickdan resetjuga akan mencegah default.

  • Dapatkan elemen yang memicu acara:

    Firefox: evt.target
    IE: evt.srcElement

  • Mendapatkan elemen yang memindahkan kursor mouse dari: evt.fromElement di IE ada evt.targetdi Firefox jika dalam suatu onmouseoutacara, sebaliknyaevt.relatedTarget

  • Mendapatkan elemen yang memindahkan kursor mouse ke: evt.toElement di IE ada evt.relatedTargetdi Firefox jika dalam suatu onmouseoutacara, sebaliknyaevt.target

  • Catatan: evt.currentTarget (elemen tempat acara terikat) tidak memiliki padanan di IE.

Periksa juga tanda koma seperti ini atau serupa jika ada di kode Anda

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

koma terakhir (mengikuti nilai2) akan ditoleransi oleh Firefox, tetapi tidak IE

Jika Anda tetap menggunakan jQuery atau YUI saat posting Anda diberi tag, Anda harus memiliki perbedaan minimal antara browser ... untuk itulah kerangka kerjanya, untuk menjaga perbedaan lintas browser ini untuk Anda.

Sebagai contoh, lihat halaman traversal DOM quirksmode , menurutnya IE tidak mendukung sebagian besar hal ... sementara benar, kerangka kerja mendukung elem.childElementCount, misalnya IE tidak mendukung , tetapi di jQuery: $(elem).children().size()berfungsi untuk mendapatkan nilai ini, di setiap browser. Anda akan menemukan ada sesuatu di perpustakaan untuk menangani 99% kasus yang tidak didukung di seluruh browser, setidaknya dengan skrip ... dengan CSS Anda mungkin harus pindah ke plugin untuk perpustakaan, contoh umum dari ini adalah untuk mendapatkan sudut yang membulat bekerja di IE ... karena tidak memiliki dukungan CSS untuk itu.

Namun, jika Anda mulai melakukan sesuatu secara langsung, seperti document.XXX(thing), Anda tidak berada di perpustakaan, Anda melakukan javascript secara langsung (semuanya javascript, tetapi Anda mengerti maksudnya :), dan ini mungkin atau mungkin tidak menyebabkan masalah, tergantung bagaimana caranya. tim IE mabuk saat mengimplementasikan fungsi khusus itu.

Dengan IE Anda lebih mungkin untuk gagal pada styling keluar yang tepat dari masalah javascript baku, animasi beberapa piksel off dan hal semacam itu, banyak lebih-jadi di IE6 tentu saja.

getElementbyID juga akan cocok dengan atribut name di IE, tetapi tidak dengan browser lain, dan IE akan memilih mana yang ditemukan pertama kali.

contoh:

<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

Ada banyak hal, tetapi satu jebakan yang biasa saya lakukan adalah banyak browser menerima JSON tanpa nama yang dikutip, sedangkan ie6 dan ie7 tidak.

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

Edit : Untuk memperjelas, ini hanya masalah jika JSON sebenarnya diperlukan, bukan literal objek. JSON adalah bagian dari sintaks literal objek dan dimaksudkan sebagai format pertukaran data (seperti XML), itulah sebabnya ia dirancang untuk menjadi lebih pemilih.

Dukungan JavaScript yang Berbeda

IE tidak mendukung (sebagian besar) ekstensi yang ditambahkan ke JavaScript sejak 1.5.

Baru di 1.6.0

• Metode Array - indexOf(), lastIndexOf(), every(), filter(), forEach(), map(),some()
• for each ... in - mengulang nilai, bukan nama properti.

Baru di 1.7.0

• Tugas penghancuran - [a,b] = [1,2]
• Iterator dan Generator
• let dan yeild

Baru di 1.8.0

• Metode Array - reduce(),reduceRight()
• Pintasan untuk menentukan fungsi.

Beberapa dari hal ini mengharuskan Anda untuk menentukan nomor versi JavaScript untuk dijalankan (yang akan rusak di bawah IE), tetapi beberapa hal seperti itu [1,2,3].indexOf(2)mungkin tidak tampak seperti masalah besar, sampai Anda mencoba menjalankannya di IE

Perbedaan utama antara JavaScript di IE dan JavaScript di peramban modern (mis., Firefox) dapat dikaitkan dengan alasan yang sama di balik perbedaan CSS / (X) HTML lintas-peramban. Dulu tidak ada standar de facto; IE / Netscape / Opera melakukan perang wilayah, menerapkan sebagian besar spesifikasi, tetapi juga menghilangkan beberapa serta membuat spesifikasi kepemilikan untuk mendapatkan keunggulan satu sama lain. Saya bisa melanjutkan panjang lebar, tetapi mari kita lewati ke rilis IE8: JavaScript telah dihindari / dicemooh selama bertahun-tahun, dan dengan munculnya FF dan penghinaan terhadap webcomm, IE memilih untuk fokus pada memajukan CSS mereka dari IE6. Dan pada dasarnya meninggalkan dukungan DOM. Dukungan DOM IE8 mungkin juga IE6, yang diluncurkan pada tahun 2001 .... jadi dukungan DOM IE hampir satu dekade di belakang browser modern. Jika Anda mengalami ketidaksesuaian JavaScript khususnya pada mesin tata letak, taruhan terbaik Anda adalah menyerangnya dengan cara yang sama seperti kami menangani masalah CSS; Menargetkan browser itu. JANGAN GUNAKAN BROWSER SNIFFING, gunakan deteksi fitur untuk mengendus browser Anda / level dukungan DOMnya.

JScript bukanlah implementasi ECMAScript dari IE; JScript adalah jawaban IE untuk JavaScript Netscape, keduanya muncul sebelum ECMAScript.

Sejauh atribut tipe pada elemen skrip, type = "text / javascript" adalah standar default (setidaknya dalam HTML5), jadi Anda tidak perlu atribut tipe kecuali skrip Anda bukan JavaScript.

Sejauh IE tidak mendukung innerHTML ... innerHTML diciptakan oleh IE dan masih BUKAN standar DOM. Browser lain telah mengadopsinya karena berguna, itulah sebabnya Anda dapat menggunakannya lintas browser. Sejauh mengubah tabel secara dinamis, MSDN mengatakan "karena struktur spesifik yang diperlukan oleh tabel, properti innerText dan innerHTML dari tabel dan objek tr bersifat hanya baca." Saya tidak tahu seberapa banyak itu benar pada awalnya, tetapi jelas browser modern telah mengetahuinya saat berurusan dengan kerumitan tata letak tabel.

Saya sangat merekomendasikan membaca PPK di JavaScript Jeremy Keith DOM Scripting JavaScript Douglas Crockford : Bagian yang Baik dan JavaScript Awal Christian Hellman dengan DOM Scripting dan Ajax untuk mendapatkan pemahaman yang kuat tentang JavaScript.

Sejauh menyangkut Frameworks / Libraries, jika Anda belum memiliki pemahaman yang kuat tentang JavaScript, Anda harus menghindarinya. 2 tahun yang lalu saya jatuh ke dalam perangkap jQuery, dan sementara saya bisa melakukan prestasi luar biasa, saya tidak pernah belajar apa pun tentang pengkodean JavaScript dengan benar. Kalau dipikir-pikir, jQuery adalah DOM Toolkit yang luar biasa dan jahat, tetapi kegagalan saya untuk mempelajari penutupan yang tepat, warisan prototipe, dll., Tidak hanya mengembalikan pengetahuan pribadi saya, pekerjaan saya mulai menghasilkan kinerja besar karena saya tidak tahu apa yang saya lakukan.

JavaScript adalah bahasa browser; jika Anda adalah insinyur sisi klien / front-end, sangat penting bagi Anda untuk memerintahkan JavaScript. Node.js membawa JavaScript secara penuh, saya melihat langkah besar yang diambil setiap hari dalam perkembangannya; JavaScript sisi server akan menjadi standar dalam waktu dekat. Saya menyebutkan ini untuk lebih menekankan betapa pentingnya JavaScript sekarang dan nantinya.

JavaScript akan membuat lebih banyak gelombang daripada Rails.

Selamat Scripting!

Beberapa objek asli bersifat hanya-baca tanpa terlihat begitu (Anda dapat menulis padanya tetapi tidak berpengaruh). Misalnya, javascript tingkat lanjut umum didasarkan pada perluasan Elementobjek dengan mengganti metode sistem, katakanlah, mengubah Element.prototype.appendChild () untuk melakukan lebih dari sekadar menambahkan simpul anak - misalnya, menginisialisasi dengan data induk. Ini akan gagal secara diam-diam di IE6 - metode asli akan dipanggil pada objek baru, bukan yang baru.

Beberapa browser (saya tidak ingat yang mana sekarang) menganggap baris baru antara tag HTML sebagai node teks, sementara yang lain tidak. Jadi childNodes (n), nextSibling (), firstChild () dan sejenisnya akan berperilaku sangat berbeda.

Trailing koma dalam array dan literal objek dulu menjadi masalah, belum diperiksa baru-baru ini (artinya IE8):

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

Ini akan menyebabkan beberapa kode tambahan saat membuat struktur seperti itu di sisi server.

Saya baru menemukan satu pagi ini, seorang rekan kerja menyetel tag skrip sebagai: <script type="application/javascript">karena pelengkapan otomatis idenya memiliki sebelum "teks / javascript"

Tapi ternyata IE hanya mengabaikan seluruh script jika menggunakan "application / javascript", maka harus menggunakan "text / javascript"

Saya menemukan permainan yang aneh beberapa hari yang lalu dengan Internet Explorer. Saya menggunakan YUI, dan mengganti isi tubuh tabel () dengan mengatur innerHTML

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

Ini akan bekerja di semua browser KECUALI IE. Saya akhirnya menemukan bahwa Anda tidak dapat mengganti innerHTML dari tabel di IE. Saya harus membuat node menggunakan YUI dan kemudian menambahkan node itu.

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

Itu menyenangkan untuk dipikirkan!

Koma ekstra dan koma yang hilang dulunya merupakan masalah biasa di IE saat berfungsi dengan lancar di FF.

IE sangat ketat tentang kehilangan ";" biasanya begitu.

Untuk apa nilainya, saya baru saja menemukan masalah buruk ini di <IE9

katakanlah Anda memiliki beberapa html seperti ini:

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

dan untuk beberapa alasan (saya punya yang bagus) Anda perlu mengambil semua HTML di tabel sebelum TR penutupan terakhir Anda dapat mencoba sesuatu seperti ini:

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

<IE9 tidak akan mengembalikan apa pun (-1) di sini karena variabel tableHtml berisi semua tag html huruf besar dan lastIndexOf peka huruf besar / kecil. Untuk menyiasati ini saya harus memasukkan toLowerCase () sebelum lastIndexOf.

IE bukanlah browser modern dan hanya mengikuti ECMAScript secara longgar.

Anda menyebutkan jQuery yang kurang saya kenal tetapi untuk referensi umum, dan secara khusus dengan Prototipe, satu hal yang harus diperhatikan adalah nama kata / metode yang dicadangkan di IE. Saya tahu yang sering membuat saya adalah hal-hal seperti:

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

(Elemen baru (tagName, propertyHash) adalah bagaimana elemen baru dibuat di Protitype). Di IE, for:harus 'for':, karenafor merupakan kata yang dipesan. Yang masuk akal - tetapi FireFox akan mentolerir ini.

Contoh lain:

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

( wrapmetode dalam Prototipe membungkus satu elemen dengan yang lain) - Di IE, di area teks, wrapadalah properti, danElement.wrap() harus digunakan sebagai pengganti versi yang dimodulasi

Ini adalah dua contoh yang muncul dari pengalaman saya. Mereka didasarkan pada prototipe tetapi masalah intinya tidak: Hati-hati terhadap metode / label / pengenal yang dianggap IE sebagai kata-kata yang dipesan tetapi FireFox atau Safari akan mentolerir.

Faktanya adalah bahwa IE tidak mendukung JavaScript ... Ini mendukung penerapan ECMAScript sendiri: JScript ... yang agak berbeda ...

Menggunakan console.log()untuk mengeluarkan kesalahan ke konsol kesalahan Firefox akan menyebabkan skrip Anda gagal di IE. Harus ingat untuk mengeluarkannya saat Anda menguji di IE.