1. Masalah Pencarian Elemen
1. Dokumen. Semua [Nama]
(1) Masalah yang ada: Firefox tidak mendukung dokumen. Semua [Nama]
(2) Solusi: Gunakan GetElementsByName (Name), GetElementById (ID), dll. Untuk menggantinya.
2. Masalah Objek Koleksi
(1) Masalah yang ada: IE dapat menggunakan () saat menggunakan banyak objek kelas koleksi, tetapi hanya [] dapat digunakan di Firefox.
Misalnya: di IE, Document.Forms ("FormName") dapat digunakan untuk mengembalikan formulir dengan nama "FormName", tetapi tidak berfungsi di Firefox.
(2) Solusi: Gunakan [], dalam contoh di atas, Anda dapat mengubah ke Document.forms ["FormName"]
3. ID elemen HTML terlihat dalam JavaScript
(1) Masalah yang ada: ID dalam elemen HTML di IE dapat digunakan secara langsung sebagai nama variabel dari objek bawahan dokumen. Tidak tersedia di Firefox.
(2) Solusi: Gunakan getElementById ("IDName") alih -alih IDNAME sebagai variabel objek.
4. Eval (IDNAME) Mendapat Objek
(1) Masalah yang ada: Dalam IE, menggunakan eval (IDNAME) dapat memperoleh objek HTML dengan ID IDName, tetapi tidak dapat digunakan di Firefox.
(2) Solusi: Gunakan GetElementById (IDNAME) alih -alih eval (IDNAME).
5. Nama variabelnya sama dengan ID objek HTML
(1) Masalah yang ada: Di Firefox, karena ID objek bukan nama objek HTML, Anda dapat menggunakan nama variabel yang sama dengan ID objek HTML, yang tidak dapat digunakan dalam IE.
(2) Solusi: Saat mendeklarasikan variabel, tambahkan VAR untuk menghindari ambiguitas, sehingga juga dapat berjalan secara normal di IE. Selain itu, sebaiknya tidak mengambil nama variabel yang sama dengan ID objek HTML untuk mengurangi kesalahan.
Catatan: 3, 4 dan 5 semuanya termasuk dalam kategori masalah yang sama.
6. Bingkai
(1) Masalah yang ada: Di IE, Anda dapat menggunakan window.top.frameid dan window.top.frameName untuk mendapatkan jendela yang diwakili oleh bingkai. Hanya window.top.framename yang dapat digunakan di Firefox.
(2) Solusi: Atur ID dan nama bingkai yang sama, dan gunakan window.top.frameName untuk mengakses bingkai.
2. Operasi Dom
1. Atur konten teks elemen.
(1) Masalah yang ada: IE menggunakan Innertext, sedangkan Firefox menggunakan TextContent untuk mengatur konten teks elemen.
(2) Solusi: Jika konten teks tidak berisi karakter khusus seperti "<" dan ">", Anda dapat menggunakan innerHTML. Jika tidak, Anda dapat menggunakan:
var anak = elem.firstchild; if (child! = null) elem.removechild (anak); elem.appendchild (document.createTextNode (konten));
2. ParentElement, Parent.Children
(1) Masalah yang ada: IE dapat menggunakan ParentElement untuk mendapatkan node orang tua, dan orang tua. Anak -anak dapat memperoleh semua node anak dari node. Firefox tidak mendukungnya.
(2) Solusi: Gunakan ParentNode dan Parent.Childnodes.
3. Penjelasan tentang Pengasuhan Anak.
(1) Masalah yang ada: Penjelasan pengasuhan anak di IE dan Firefox berbeda. IE tidak akan menyertakan node teks kosong, sedangkan Firefox akan termasuk.
(2) Solusi: Gunakan Childnodes untuk memfilter node teks, sebagai berikut:
var anak -anak = elem.childnodes; untuk (i = 0; i <children.length; i ++) {if (anak -anak [i] .nodetype! = 3) {// filter node teks // ...}}4. Penjelasan Document.getElementsByName.
(1) Masalah yang ada: GetElementsByName di IE hanya akan memeriksa elemen <Input> dan <mmg>, sementara semua elemen akan diperiksa di bawah Firefox.
(2) Solusi: Jangan gunakan GetElementsByName untuk memeriksa elemen selain dari <Input> dan <mmg>. Jika Anda ingin mendapatkan satu elemen, cobalah menggunakan GetElementById.
5. Penjelasan Document.getElementById.
(1) Masalah yang ada: getElementById di IE tidak hanya memeriksa atribut ID, tetapi juga memeriksa atribut nama. Elemen ini juga akan dikembalikan ketika atribut nama cocok dengan parameter. Di Firefox, hanya atribut ID yang akan diperiksa.
(2) Solusi: Cobalah untuk menjaga ID dan nama yang sama, dan jangan membuat atribut nama dari satu elemen dan atribut ID dari elemen lain yang sama.
AKU AKU AKU. Acara
1. Event.x dan event.y masalah
(1) Masalah yang ada: Dalam IE, objek acara memiliki atribut X, Y, tetapi tidak di Firefox.
(2) Solusi: Di Firefox, setara dengan Event.x adalah Event.pagex. Dapat digunakan:
mx = event.x? event.x: event.pagex;
2. Window.event
(1) Masalah yang ada: Menggunakan Window.event tidak dapat berjalan di Firefox
(2) Solusi:
Kode Asli (dapat dijalankan di IE):
<input type = "tombol" name = "somebutton" value = "kirim" onclick = "javascript: gotosubmit ()"/> ... <script language = "javascript"> function gotosubmit () {... waspada (window.event); // Gunakan window.event ...} </script>Kode baru (dapat berjalan di IE dan Firefox):
<input type = "Tombol" name = "somebutton" value = "kirim" onClick = "javascript: gotosubmit (event)"/> ... <script language = "javascript"> function gotosubmit (evt) {evt = evt? evt: (window.event? window.event: null); ... Peringatan (EVT); // Gunakan EVT ...} </script>3. AttachEvent dan AddEventListener
(1) Masalah yang ada: IE menggunakan AttachEvent untuk menambahkan peristiwa, dan Firefox menggunakan AddEventListener.
(2) Solusi: Sebagai berikut, perhatikan perbedaan dalam parameter acara, satu adalah klik dan yang lainnya adalah OnClick.
if (document.attachevent) document.attachevent ("klik", clickhandler, false);
else document.addeventlistener ("onClick", clickhandler);
4. Tata bahasa
1. Const
(1) Masalah yang ada: Kata kunci const tidak dapat digunakan di IE. Misalnya, constvar constvar = 32; Dalam IE ini adalah kesalahan sintaksis.
(2) Solusi: Jangan gunakan const, gunakan var sebagai gantinya.
2. Koma ekstra
(1) Masalah yang ada: Objek konstanta literal di Firefox berisi banyak koma, yang tidak diperbolehkan dalam IE. Pernyataan berikut adalah ilegal di IE.
var obj = {'key': 'aaa',}
(2) Solusi: Hapus koma berlebih.
5. xml
1. Buat xmlHttpRequest
(1) Masalah yang ada: Firefox menggunakan XMLHTTPREQUEST, yaitu menggunakan ActiveXObject.
(2) Solusi:
if (window.xmlHttpRequest) {req = new xmlhttpRequest (); } else if (window.activexObject) {req = new ActivexObject ("microsoft.xmlhttp"); }2. Buat DOM
(1) Masalah yang ada: Firefox dan IE membuat DOM secara berbeda.
(2) Solusi:
fungsi createxmldom () {var oxmldom; if (window.activexObject) {// yaitu oxmldom = ActivexObject baru ("microsoft.xmldom"); } else {// firefox oxmldom = document.implementation.createdocument ("", "", null); }}3. Muat xml
(1) Masalah yang ada: Jika Anda ingin memuat file eksternal IE dan Firefox, Anda dapat menggunakannya:
oxmldom.async = false; // Ini diperlukan di Firefox
oxmldom.load ("test.xml");
Namun, mereka memuat string XML dengan cara yang berbeda. Anda dapat secara langsung menggunakan oxmldom.loadxml ("<soot> <child /> </soot>") di IE, sedangkan Firefox perlu menggunakan DOMPARSER:
var oparser = domparser baru ();
var oxmldom = oparser.parsefromstring ("<root/>", "text/xml");
(2) Solusi: Metode yang lebih baik adalah menambahkan metode LoadXML ke xmldom yang dihasilkan oleh Firefox:
if (isFirefox) {// membutuhkan deteksi browser
Document.prototype.loadxml = function (sxml) {var oparser = domParser baru (); var oxmldom = oparser.parsefromstring (sxml, "text/xml"); while (this.firstchild) this.removechild (this.firstchild); untuk (var i = 0; i <oxmldom.childnodes.length; i ++) {var onewnode = this.importnode (oxmldom.childnodes [i], true); this.appendChild (onewnode); }}}Dengan cara ini, metode LoadXML dapat dipanggil di IE dan Firefox.
4. Dukungan XPath
(1) Masalah yang ada: Di IE, Anda dapat secara langsung menggunakan Pilihan Xmldom untuk memilih node berdasarkan representasi XPath. Firefox lebih rumit dan membutuhkan penggunaan Xpathevaluator.
YAITU:
var lstnodes = oxmldom.documentelement.selectnodes ("karyawan/nama"); untuk (var i = 0; i <lstnodes.length; i ++) {alert (lstnodes [i] .firstchild.nodevalue); }Firefox:
var oevaluator = xpathevaluator baru (); var oresult = oevaluator.evaluate ("karyawan/nama", oxmldom.documentElement, null, xpathresult.ordered_node_iterator_type, null); var oelement = oresult.iterateNext (); while (oElement) {waspada (oelement.firstchild.nodevalue); oElement = oresult.iteratenext (); }(2) Solusi: Metode yang lebih baik untuk menambahkan metode SelectNodes ke elemen Firefox.
if (isFirefox) {// browser perlu mendeteksi elemen.prototype.selectNodes = function (sxPath) {var oevaluator = new xpathevaluator (); var oresult = oevaluator.evaluate (sxpath, this, null, xpathresult.ordered_node_iterator_type, null); var anodes = array baru (); if (oresult! = null) {var oelement = oresult.iterateNext (); while (oElement) {anodes.push (oElement); oElement = oresult.iteratenext (); }} return anodes; }}Dengan cara ini, metode SelectNodes dapat dipanggil dalam IE dan Firefox.
5. Dukungan XSLT
(1) Masalah yang ada: Dalam IE, Anda dapat menggunakan metode TransferNode XMLDOM untuk mengubahnya menjadi HTML, sementara Firefox perlu menggunakan XSLTProcessor.
YAITU:
oxmldom.Load ("usaha.xml"); oxsldom.Load ("usaha.xslt"); var sresult = oxmldom.transformnode (oxsldom);Firefox:
var oprocessor = xsltprocessor baru (); oprocessor.importstylesheet (Oxsldom); var oresultdom = oprocessor.transformtodocument (oxmldom); var oserializer = xmlserializer baru (); var sxml = oserializer.serializetoString (oresultdom, "text/xml"); Peringatan (SXML);
(2) Solusi: Cara yang lebih baik untuk menambahkan metode TransferNode ke Node Firefox.
if (isFirefox) {// browser perlu mendeteksi node.prototype.transformnode = fungsi (oxsldom) {var oprocessor = new xsltprocessor (); oprocessor.importstylesheet (Oxsldom); var oresultdom = oprocessor.transformtodocument (oxmldom); var oserializer = xmlserializer baru (); var sxml = oserializer.serializetoString (oresultdom, "text/xml"); mengembalikan sxml; }}Dengan cara ini, metode TransferNode dapat dipanggil dalam IE dan Firefox.
Di atas adalah ringkasan dari metode penulisan JS yang kompatibel dengan browser, saya harap ini akan membantu untuk pembelajaran semua orang.