Artikel ini merangkum dan menganalisis masalah kompatibilitas umum dalam JavaScript di IE dan browser Firefox. Bagikan untuk referensi Anda, sebagai berikut:
Membentuk
document.formname.item ("itemName")IE: Anda dapat menggunakan document.formname.item ("itemName") atau document.formname.elements ["elementName"]
Firefox: Only Document.FormName.elements ["ElementName"]
Solusi: Gunakan Document.FormName.elements ["ElementName"]
Objek Kelas Koleksi
IE: Anda dapat menggunakan () atau [] untuk mendapatkan objek kelas koleksi;
Firefox: Hanya gunakan [] untuk mendapatkan objek kelas pengumpulan.
Solusi: Gunakan [] untuk mendapatkan objek kelas pengumpulan dengan cara terpadu.
Properti Kustom
IE: Anda dapat menggunakan metode mendapatkan atribut reguler untuk mendapatkan atribut khusus, atau Anda dapat menggunakan getAttribute () untuk mendapatkan atribut khusus
Firefox: Anda hanya dapat menggunakan getAttribute () untuk mendapatkan properti khusus.
Solusi: Dapatkan secara seragam atribut khusus melalui getAttribute ().
Akuisisi elemen
Eval ("Idname")IE: Anda dapat menggunakan eval ("IDName") atau GetElementById ("IDName") untuk mendapatkan objek HTML dengan IDNAME;
Firefox: Anda hanya dapat menggunakan GetElementById ("IDName") untuk mendapatkan objek HTML dengan IDNAME dengan IDNAME.
Solusi: Gunakan getElementById ("IDName") untuk mendapatkan objek HTML dengan ID sebagai IDName.
Penamaan duplikat
Masalah dengan nama variabel yang sama dengan ID objek HTML tertentu
IE: ID objek HTML dapat digunakan secara langsung sebagai nama variabel dari objek bawahan dokumen, tetapi tidak dapat digunakan di bawah Firefox;
Firefox: Anda dapat menggunakan nama variabel yang sama dengan ID objek HTML, tetapi Anda tidak dapat berada di IE.
Penanganan masalah: Gunakan Document.GetElementById ("IDName") bukan Document.idname. Yang terbaik adalah tidak mengambil nama variabel dengan ID objek HTML yang sama untuk mengurangi kesalahan; Saat mendeklarasikan variabel, tambahkan VAR untuk menghindari ambiguitas.
const
IE: Hanya gunakan kata kunci VAR untuk mendefinisikan variabel.
Firefox: Anda dapat menggunakan kata kunci const atau kata kunci VAR untuk menentukan variabel.
Solusi: Gunakan kata kunci VAR untuk mendefinisikan variabel secara seragam.
input.type
Masalah atribut input.type
IE: Atribut input.type hanya baca.
Firefox: Atribut input.type dibaca dan ditulis.
window.event
Window.event hanya dapat berjalan di bawah IE, bukan di Firefox, karena acara Firefox hanya dapat digunakan di tempat kejadian di mana peristiwa itu terjadi.
Firefox: Acara harus ditambahkan dari sumber untuk melewati parameter. IE mengabaikan parameter ini dan menggunakan Window.event untuk membaca acara tersebut.
Larutan:
<bahasa skrip = "javascript"> fun fun (e) {e = e? E: (window.event? window.event: null); } </script>event.x dan event.y
Deskripsi: Di bawah IE, objek genap memiliki atribut X dan Y, tetapi tidak memiliki atribut Pagex dan Pagey; Di bawah Firefox, objek genap memiliki atribut Pagex dan Pagey, tetapi tidak memiliki atribut X dan Y.
Solusi: Gunakan mx (mx = event.x? Event.x: event.pagex;) alih -alih event.x di bawah IE atau event.pagex di bawah firefox.
event.srcelement
IE: Objek acara memiliki properti srcelement, tetapi tidak memiliki properti target;
Firefox: Bahkan objek memiliki properti target, tetapi tidak ada properti srcelement.
Solusi: Gunakan OBJ (obj = event.srcelement? Event.srcelement: event.target;) Alih -alih event.srcelement di bawah IE atau event.target di bawah Firefox. Harap juga perhatikan masalah kompatibilitas acara.
window.location.href
Yaitu atau firefox2.0.x: Anda dapat menggunakan window.location atau window.location.href;
Firefox1.5.x: hanya window.location yang digunakan
Penanganan masalah: Gunakan window.location bukan window.location.href.
Windows Modal dan Non-Modal
IE: Jendela modal dan non-modal dapat dibuka melalui showmodaldialog dan showmodelessdialog
Firefox: Tidak!
Solusi: Gunakan window.open (pageUrl, nama, parameter) untuk membuka jendela baru.
Jika Anda perlu meneruskan parameter di jendela anak kembali ke jendela induk, Anda dapat menggunakan window.opener di jendela anak untuk mengakses jendela induk. Misalnya: var parwin = window.opener; parwin.document.geteLementById ("aqing"). Value = "aqing";
bingkai
Bingkai berikut adalah contoh:
<frame src = "xxx.html" id = "frameid" name = "frameName" />
1. Akses objek bingkai:
[Objek yang dikembalikan di IE adalah objek, dan jenis spesifik akan ditampilkan di FF, seperti: jendela objek]
IE: Gunakan window.frameid atau window.framename untuk mengakses objek bingkai ini. Frameid dan Framename dapat memiliki nama yang sama.
Firefox: Hanya Window.Framename yang dapat digunakan untuk mengakses objek bingkai ini.
Baik di IE dan Firefox, Anda dapat menggunakan window.document.getElementById ("frameid") untuk mengakses objek bingkai ini.
2. Konten bingkai sakelar:
Baik di IE dan Firefox, Anda dapat menggunakan window.document.getElementById ("testframe"). Src = "xxx.html" atau window.frameName.location = "xxx.html" untuk mengganti konten bingkai.
Jika Anda perlu meneruskan parameter dalam bingkai kembali ke jendela induk (perhatikan bahwa itu bukan pembuka, tetapi bingkai induk), Anda dapat menggunakan induk dalam bingkai untuk mengakses jendela induk. Misalnya: parent.document.form1.filename.value = "a";
Tubuh
IE: Tubuh harus ada setelah tag tubuh sepenuhnya dibaca oleh browser.
Firefox: Tubuh ada sebelum tag tubuh dibaca sepenuhnya oleh browser.
Metode Delegasi Acara
IE: Salinan kode adalah sebagai berikut: document.body.onload = suntikan; // function inject () telah diimplementasikan sebelum ini
Firefox: Salinan kode adalah sebagai berikut: document.body.onload = inject ();
Elemen induk
Perbedaan antara Firefox dan IE Parent Element (ParentElement)
IE: Obj.ParentElement
Firefox: obj.parentnode
Solusi: Karena Firefox dan IE mendukung DOM, menggunakan obj.parentnode adalah pilihan yang baik.
Kursor penunjuk tikus
Kursor: Tangan vs Kursor: Pointer
Firefox: Tangan tidak didukung
IE: Dukungan Pointer
Solusi: Gunakan pointer secara seragam
Teks konten
Innertext bekerja secara normal di IE. Namun, Innertext tidak berfungsi di Firefox, diperlukan konten teks.
Larutan:
if (navigator.appname.indexof ("explorer")> -1) {document.getElementById ('elemen'). innertext = "my text"; } else {document.geteLementById ('elemen'). textc; }Operasi di atas meja
IE, Firefox dan browser lainnya memiliki operasi yang berbeda pada tag tabel. Dalam IE, tidak diizinkan untuk menetapkan nilai innerHTML ke tabel dan tr. Saat menggunakan JS untuk menambahkan TR, metode AppendChild tidak berguna.
Larutan:
// Tambahkan baris kosong ke tabel: var row = otable.InserTrow (-1); var cell = document.createElement ("td"); cell.innerhtml = ""; cell.classname = "a"; Row.AppendChild (sel);Koleksi Opsi
Pengoperasian Koleksi Opsi di Pilihan
Selain [], selectname.options.item () juga dimungkinkan. Selain itu, selectName.Options.length, selectname.options.add/Remove dapat digunakan di kedua browser.
*Perhatikan bahwa elemen tersebut ditetapkan setelah Tambah, jika tidak, ia akan gagal.
Xmlhttp
if (window.xmlHttpRequest) {xmlhttp = new xmlHttpRequest (); } else if (window.activexObject) {// kode untuk yaitu xmlhttp = new ActivexObject ("microsoft.xmlhttp"); } if (xmlhttp) {xmlhttp.onreadystatechange = xmlhttpchange; xmlhttp.open ("get", url, true); xmlhttp.send (); }Untuk informasi lebih lanjut tentang konten terkait JavaScript, silakan periksa topik -topik situs ini: "Ringkasan Kesalahan JavaScript dan Keterampilan Debugging", "Ringkasan JavaScript Matematika Penggunaan Operasi", "Ringkasan Keterampilan Operasi JSON dalam Javascript", Ringkasan Javascript "Ringkasan Khusus" Ringkasan Khusus "Ringkasan Javascript" Ringkasan Javascript "Ringkasan Javascript", "Ringkasan Javascript" Ringkasan Javascript "Ringkasan Javascript" Keterampilan "," Ringkasan Struktur Data JavaScript dan Keterampilan Algoritma "dan" Ringkasan Algoritma dan Keterampilan Traversal JavaScript "
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.