1. Document.FormName.Item ("ItemName") Masalah
Deskripsi Masalah: Di IE, Anda dapat menggunakan Document.FormName.Item ("ItemName") atau Document.FormName.elements ["ElementName"]; Di Firefox, Anda hanya dapat menggunakan Document.FormName.elements ["ElementName"].
Solusi: Gunakan Document.FormName.elements ["ElementName"] dengan cara yang disatukan.
2. Masalah Objek Koleksi
Deskripsi Masalah: Di IE, Anda dapat menggunakan () atau [] untuk mendapatkan objek kelas koleksi; Di Firefox, Anda hanya dapat menggunakan [] untuk mendapatkan objek kelas pengumpulan.
Solusi: Gunakan [] untuk mendapatkan objek kelas pengumpulan dengan cara terpadu.
3. Masalah atribut khusus
Deskripsi Masalah: Dalam IE, Anda dapat menggunakan metode mendapatkan atribut reguler untuk mendapatkan atribut khusus, atau Anda dapat menggunakan getAttribute () untuk mendapatkan atribut khusus; Di Firefox, Anda hanya dapat menggunakan getAttribute () untuk mendapatkan atribut khusus.
Penanganan masalah: Dapatkan secara seragam atribut khusus melalui getAttribute ().
4. Masalah Eval ("Idname")
Deskripsi Masalah: Dalam IE, Anda dapat menggunakan eval ("IDName") atau GetElementById ("IDName") untuk mendapatkan objek HTML dengan IDNAME; Di Firefox, Anda hanya dapat menggunakan GetElementById ("IdName") untuk mendapatkan objek HTML dengan IDNAME.
Solusi: Gunakan getElementById ("IDName") untuk mendapatkan objek HTML dengan ID sebagai IDName.
5. Masalah nama variabel dan id objek html tertentu
Deskripsi Masalah: Di bawah IE, ID objek HTML dapat digunakan secara langsung sebagai nama variabel dari objek bawahan dokumen, tetapi tidak di Firefox; Di bawah Firefox, nama variabel yang sama dengan ID objek HTML dapat digunakan, tetapi tidak dalam 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 kata kunci VAR untuk menghindari ambiguitas.
6. Masalah Const
Deskripsi Masalah: Di Firefox, Anda dapat menggunakan kata kunci Const atau kata kunci VAR untuk mendefinisikan konstanta; Dalam IE, Anda hanya dapat menggunakan kata kunci VAR untuk mendefinisikan konstanta.
Solusi: Gunakan kata kunci VAR untuk mendefinisikan konstanta secara seragam.
7. Masalah atribut input.type
Deskripsi Masalah: Properti Input.Type di bawah IE hanya baca; tetapi properti input.
Solusi: Jangan ubah properti input.Type. Jika Anda harus memodifikasinya, Anda dapat menyembunyikan input asli terlebih dahulu dan kemudian memasukkan elemen input baru di posisi yang sama.
8. Window. Masalah Ovent
Deskripsi Masalah: Window.event hanya dapat berjalan di bawah IE, bukan di Firefox, karena acara Firefox hanya dapat digunakan di adegan di mana peristiwa terjadi.
Solusi: Tambahkan parameter acara ke fungsi di mana peristiwa terjadi, dan gunakan var myevent = evt? Evt: (window.event? Window.event: null)
Contoh:
<input type = "tombol" ontClick = "dosomething (event)"/> <script language = "javascript"> function dosomething (evt) {var myevent = evt? evt: (window.event? window.event: null) ...}9. Event.x dan Event.y Masalah
Deskripsi Masalah: Di bawah IE, objek genap memiliki atribut X dan Y, tetapi tidak ada atribut Pagex dan Pagey; Di bawah Firefox, objek genap memiliki atribut Pagex dan Pagey, tetapi tidak ada atribut X dan Y.
Solusi: var myx = event.x? event.x: event.pagex; var myy = event.y? event.y: event.pagey;
Jika Anda mempertimbangkan masalah ke -8, cukup gunakan MyEvent alih -alih acara.
10. Event.srelement Masalah
Deskripsi Masalah: Di bawah IE, objek genap memiliki properti srcelement, tetapi tidak ada properti target; Di bawah Firefox, objek genap memiliki properti target, tetapi tidak ada properti srcelement.
Solusi: Gunakan srcobj = event.srcelement? event.srcelement: event.target;
Jika Anda mempertimbangkan masalah ke -8, cukup gunakan MyEvent alih -alih acara.
11. Window.location.href Masalah
Deskripsi Masalah: Di IE atau Firefox2.0.x, Anda dapat menggunakan window.location atau window.location.href; Di firefox1.5.x, Anda hanya dapat menggunakan window.location.
Penanganan masalah: Gunakan window.location bukan window.location.href. Tentu saja, Anda juga dapat mempertimbangkan menggunakan metode location.replace ().
12. Masalah Modal dan Jendela Non-Modal
Deskripsi Masalah: Di bawah Windows IE, Modal dan Non-Modal dapat dibuka melalui Showmodaldialog dan ShowmodelessDialog; Di bawah Firefox, itu tidak bisa.
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. Jika jendela induk perlu mengontrol jendela anak, gunakan var subwindow = window.open (pageUrl, name, parameter); Untuk mendapatkan objek jendela yang baru dibuka.
Tiga Belas, Masalah Bingkai dan Iframe
Bingkai berikut adalah contoh:
(1) Objek bingkai akses
Yaitu: gunakan window.frameid atau window.frameName untuk mengakses objek bingkai ini;
Firefox: Gunakan Window.Framename untuk mengakses objek bingkai ini;
Solusi: Gunakan window.document.getElementById ("frameid") untuk mengakses objek bingkai ini;
(2) Beralih konten bingkai
Baik di IE dan Firefox, Anda dapat menggunakan window.document.getElementById ("frameid"). Src = "webjx.com.html" atau window.frameName.location = "webjx.com.html" untuk mengubah konten bingkai;
Jika Anda perlu meneruskan parameter dalam bingkai kembali ke jendela induk, Anda dapat menggunakan kata kunci induk di bingkai untuk mengakses jendela induk.
14. Masalah pemuatan tubuh
Deskripsi Masalah: Objek tubuh Firefox ada sebelum tag tubuh sepenuhnya dibaca oleh browser; Sementara objek tubuh IE harus ada setelah tag tubuh sepenuhnya dibaca oleh browser.
[Catatan] Masalah ini belum benar -benar diverifikasi, dan akan dimodifikasi setelah verifikasi.
[Catatan] Telah terbukti bahwa masalah di atas tidak ada di IE6, Opera9 dan Firefox2. Skrip JS sederhana dapat mengakses semua objek dan elemen yang telah dimuat sebelum skrip, bahkan jika elemen ini belum dimuat.
15. Metode Delegasi Acara
Deskripsi Masalah: Dalam IE, gunakan Document.Body.onload = inject; di mana fungsi suntikan () telah diimplementasikan sebelum ini; Di Firefox, gunakan document.body.onload = inject ();
Solusi: Gunakan document.body.onload = fungsi baru ('inject ()'); atau document.body.onload = function () {/* Berikut ini kode*/}
[Catatan] Perbedaan antara fungsi dan fungsi
16. Perbedaan antara elemen induk yang diakses
Deskripsi Masalah: Di bawah IE, gunakan obj.parentelement atau obj.parentnode untuk mengakses simpul induk OBJ; Di bawah Firefox, gunakan obj.parentnode untuk mengakses simpul induk OBJ.
Solusi: Karena Firefox dan IE mendukung DOM, OBJ.PARENTNODE digunakan untuk mengakses simpul induk OBJ.
17. Masalah Innertext.
Deskripsi Masalah: Innertext berfungsi dengan baik di IE, tetapi Innertext tidak berfungsi di Firefox.
Solusi: Gunakan TextContent alih-alih Innertext di browser non -e.
Contoh:
if (navigator.appname.indexof ("explorer")> -1) {document.getElementById ('elemen'). innertext = "my text"; } else {document.geteLementById ('elemen'). textContent = "; saya teks"; }[Catatan] InnerHTML didukung oleh browser seperti IE dan Firefox. Lainnya, seperti outerhtml, hanya didukung oleh IE, jadi sebaiknya tidak menggunakannya.
18. Masalah Operasi Tabel
Deskripsi Masalah: 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, menggunakan metode AppendChild tidak berfungsi. Document.AppendChild mendukung Firefox saat memasukkan baris ke dalam tabel, tetapi IE tidak mendukungnya.
Solusi: Masukkan baris ke dalam tbody, jangan masukkan langsung ke tabel
Larutan:
// Tambahkan baris kosong ke tabel: var row = otable.InserTrow (-1); var cell = document.createElement ("td"); cell.innerhtml = ""; cell.classname = "xxxx"; Row.AppendChild (sel);[Catatan] Disarankan untuk menggunakan set kerangka kerja JS untuk mengoperasikan tabel, seperti jQuery.
• Dapatkan jumlah baris dan kolom tabel
Di IE, Anda dapat menggunakan kode berikut untuk mendapatkan jumlah baris dan kolom:
var detailt = grid.gettable ("11"); // Dapatkan panjang baris var r = detailt.rows.length; // Dapatkan panjang kolom var l = detailt.cells.length;Dan mendapatkan panjang kolom di Firefox atau Google tidak valid.
Larutan:
var detailt = grid.gettable ("11"); // Dapatkan panjang baris var r = detailt.rows.length; // Dapatkan panjang kolom var l = detailt.rows [0] .cells.length;19. Lebar objek dan masalah penugasan tinggi
Deskripsi Masalah: Pernyataan yang mirip dengan obj.style.height = imgobj.height di firefox tidak valid.
Solusi: Gunakan obj.style.height = imgobj.height + 'px' dalam seragam;
20. setattribute ('style', 'color: red;')
Firefox mendukung (kecuali yaitu, semua browser sekarang mendukungnya), IE tidak mendukungnya
Solusi: Jangan SetAttribute ('Style', 'Color: Red')
Gunakan Object.style.csStext = 'Color: Red;' (Ada pengecualian untuk tulisan ini)
Cara terbaik adalah dengan menggunakan semua metode di atas, dan itu akan sangat mudah.
21. Pengaturan Nama Kelas
setAttribute ('class', 'styleClass')
Dukungan Firefox, tetapi IE tidak mendukung (tentukan nama atribut adalah kelas, IE tidak akan mengatur atribut kelas elemen. Secara bertentangan, IE akan secara otomatis mengenali atribut ClassName ketika setAttribute digunakan)
Larutan:
setAttribute ('class', 'styleClass') setAttribute ('className', 'styLeClass') atau langsung objek.classname = 'styleClass';Baik Object Dukungan IE dan FF.className.
22. Atur acara dengan setAttribute
var obj = document.geteLementById ('objid');
obj.setAttribute ('onClick', 'funcitonname ();');
Firefox mendukung, tetapi IE tidak mendukung
Larutan:
Dalam IE, notasi titik harus digunakan untuk merujuk pada event handler yang diperlukan, dan fungsi anonim harus ditugaskan kepadanya.
sebagai berikut:
var obj = document.geteLementById ('objid'); obj.onClick = function () {fucntionname ();};Metode ini didukung oleh semua browser
23. Buat tombol radio
Browser selain IE
var rdo = document.createElement ('input'); rdo.setAttribute ('type', 'Radio'); rdo.setAttribute ('name', 'RadioBtn'); rdo.setAttribute ('value', 'checked');YAITU:
var rdo = document.createElement ("<input name =" RadioBtn "type =" Radio "value =" checked " />");Larutan:
Perbedaan ini berbeda dari yang sebelumnya. Kali ini benar-benar berbeda, jadi tidak ada cara umum untuk menyelesaikannya, jadi hanya if-else
Untungnya, IE dapat mengenali atribut unik dari dokumen tersebut, yang tidak dapat dikenali oleh browser lainnya. Masalah terpecahkan.
Solusi cepat untuk 23 masalah kompatibilitas multi-browser dalam JavaScript adalah konten lengkap yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.