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


108

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.


Sejauh ini tidak ada masalah dengan css atau styling, seperti yang saya tahu dari pengkodean sebelumnya. Hanya masalah JS - karlthorwald
user89021

1
Saya pertama-tama akan menjalankan JSLint sekarang pada semua file, ada beberapa yang tidak pernah saya adaptasi.
pengguna89021

7
"Ini adalah kesalahan dasar saya, bahwa saya tidak membangun semua barang saya di jQuery sejak awal." - ini tidak akan secara ajaib menyelesaikan semua masalah lintas-browser Anda. Cari stackoverflow untuk jQuery dan IE, Anda akan menemukan banyak sekali masalah. Paling baik untuk mempelajari skrip lintas-browser sendiri sehingga ketika jQuery atau salah satu dari miliaran plugin samar-samar gagal, Anda akan dapat menerapkan solusi lintas-browser yang berfungsi nyata, dan tahu bahwa itu berfungsi, dan mengapa.
Dagg Nabbit

11
+1 Pada komentar no di atas. Anda JAUH lebih baik menghindari jQuery sepenuhnya jika Anda sedang mempelajari javascript - jQuery sangat berguna jika Anda ingin menyelesaikan sesuatu yang rumit dengan cepat dan mudah, tetapi jika Anda mempelajarinya, itu akan melindungi Anda dari kerumitan memahami bagaimana sebenarnya javascript berfungsi - terlalu banyak orang yang sepertinya tahu jQuery tetapi belum tahu cara menulis javascript. Anda tidak membuat kesalahan dengan tidak membangun jQuery pada awalnya - Anda sekarang memiliki pemahaman yang jauh lebih baik tentang kode Anda sendiri daripada jika Anda memilikinya.
Lucideer

Jawaban:


121

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.


12
Daftar yang sangat, sangat, sangat bagus! Terima kasih kepada semua orang yang berkontribusi :)
cwap

26

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


1
Kebanyakan editor yang baik harus menangkap yang ini
SeanJA

1
+1, Saya terlalu sering memiliki yang ini.
David V.

1
Saya akan memberi Anda +10 jika saya bisa - ini terjadi pada saya sepanjang waktu.
Josh

Oh dan untuk menambah komentar @ SeanJA: Saya baru saja beralih ke NetBeans yang menangkap ini.
Josh

Saya kehilangan begitu banyak jam untuk ini saat pertama kali saya melakukan beberapa pekerjaan JS. Sekarang adalah hal pertama yang saya periksa! Kutukan ekspansi Textmate yang jelek dengan meninggalkan koma.
Agos

12

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.


Saya lebih mengerti sekarang. Ya, saya juga melakukan hal seperti itu secara langsung. karlthorwald
pengguna89021

1
Jika Anda menggunakan IDE seperti Netbeans, Anda dapat mengatur browser target untuk javascript Anda dan itu juga akan membantu dengan memperingatkan Anda ketika Anda melakukan sesuatu yang tampaknya tidak didukung.
SeanJA

10

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

3
maaf karena bersikap kasar tetapi IE benar-benar jelek
user89021

12
document.getElementByIdOrNameIGuessWhateverMan (id);
JulianR

5

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.


2
Perhatikan bahwa ini tergantung pada konteks, literal objek baik-baik saja, JSON tidak ... tetapi misalnya jQuery tidak mengizinkan JSON yang tidak valid sama sekali dalam rilis terbaru mereka.
Nick Craver

Bukan suara negatif saya ... tetapi Anda harus mengklarifikasi ini untuk orang lain, lalu memberi +1 dari saya.
Nick Craver

5

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

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


1
JavaScript yang Anda bicarakan di sini adalah JavaScript (TM) mozilla, bukan javascript dalam arti yang lebih umum. Tidak semua implementasi ECMAScript / mesin javascript (MS JScript dalam hal ini) diharapkan mengikuti JavaScript (TM) mozilla. ECMAScript adalah standar, bukan JavaScript (TM), dan JavaScript (TM) bukan javascript. Saya harap itu masuk akal.
Dagg Nabbit

Masuk akal bagi saya, tetapi pada utas tentang kompatibilitas antara JavaScript dan JScript, saya pikir itu sudah dimengerti :)
gnarf

Ketika Anda mengatakan "IE tidak mendukung (sebagian besar) ekstensi yang ditambahkan ke JavaScript sejak 1.5.", Sepertinya Anda mengatakan JavaScript (TM) mozilla adalah standar yang harus dipatuhi IE, padahal tentu saja tidak. Setidaknya Anda bisa mengatakan JavaScript Mozilla atau yang serupa ... browser lain tidak mendukung semua ekstensi mozilla ke ECMAScript seperti tugas penghancuran, dll. Pertanyaannya adalah tentang perbedaan antara 'most' javascriptdan (implementasi spesifik) JScript, bukan perbedaan antara Mozilla JavaScript(TM)dan JScript. Mungkin lebih baik untuk menunjukkan di mana IE menyimpang dari ES.
Dagg Nabbit

3

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!


2
Jawaban bagus, meskipun saya tidak setuju dengan menggunakan deteksi fitur untuk mengendus browser; hanya menggunakan fitur deteksi untuk menguji dukungan dari orang-orang fitur. Lihat juga contoh di Deteksi fitur bukan deteksi browser .
Marcel Korpel

meh. saya sepenuhnya setuju dengan ketidaksetujuan Anda. terima kasih sudah menangkapnya. Saya masih JavaScript n00b, tapi tidak ada rasa malu dalam permainan saya. "Deteksi browser berbasis fitur adalah praktik yang sangat buruk yang harus dihindari dengan cara apa pun. Deteksi fitur langsung adalah praktik terbaik, dan di hampir setiap kasus, persis seperti yang Anda perlukan."
albert

2

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.


2

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.


2

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"


javascript adalah default di semua browser, jadi gunakan saja<script>
Lauri

2

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!


1
Saya merasa Anda perlu membungkusnya dengan <tbody>tag.
Casey Chu

Dalam kode aslinya, ini sebenarnya dibungkus dengan tag <tbody>. Masih mengejutkan saya bahwa IE tidak menyukainya. Saya ingat pernah membacanya di dokumen resmi Microsoft, tetapi saya tidak dapat menemukan tautannya sekarang. Maaf!
Justin

1

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


1

IE sangat ketat tentang kehilangan ";" biasanya begitu.


Saya menemukan banyak di antaranya saat saya jsLinting sekarang. Tampaknya menjadi poin penting.
pengguna89021

1

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.


0

IE bukanlah browser modern dan hanya mengikuti ECMAScript secara longgar.


0

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.


0

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


0

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.


Saya percaya menggunakan console.log juga akan gagal bahkan di Firefox jika Anda tidak mengaktifkan FireBug.
ejel
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.