Kompatibilitas JavaScript telah lama menjadi masalah utama bagi pengembang web. Perbedaan antara spesifikasi formal, standar faktual dan berbagai implementasi telah menyebabkan banyak pengembang menderita siang dan malam. Untuk tujuan ini, kompatibilitas JavaScript IE dan Firefox terutama dirangkum dari perbedaan berikut:
Salinan kode adalah sebagai berikut:
1. Perbedaan antara fungsi dan metode;
2. Akses dan Pengaturan Gaya;
3. Metode DOM dan referensi objek;
4. Penanganan acara;
5. Perawatan Kompatibilitas untuk Perbedaan Lainnya.
1. Perbedaan antara fungsi dan metode
1. Metode getYear ()
[Instruksi Analisis] Mari kita lihat kode berikut:
Salinan kode adalah sebagai berikut:
var tahun = tanggal baru (). getYear ();
document.write (tahun);
Tanggal yang Anda dapatkan di IE adalah "2010", dan tanggal yang Anda lihat di Firefox adalah "110", terutama karena di Firefox Getyear mengembalikan nilai "tahun-tahun 1900 saat ini".
【Pemrosesan Kompatibilitas】 Tambahkan ke Hakim Tahun, seperti:
Salinan kode adalah sebagai berikut:
var tahun = tanggal baru (). getYear ();
tahun = (tahun <1900? (1900+tahun): Tahun);
document.write (tahun);
Anda juga dapat menyebutnya melalui Getlyear Getutcear:
Salinan kode adalah sebagai berikut:
var tahun = tanggal baru (). getlyear ();
document.write (tahun);
2. Fungsi eval ()
[Catatan Analisis] 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.
[Pemrosesan Kompatibilitas] Gunakan GetElementById ("IDNAME") untuk mendapatkan objek HTML dengan IDNAME dengan IDNAME.
3. Pernyataan Const
[Catatan Analisis] Kata kunci const tidak dapat digunakan di IE. menyukai:
Salinan kode adalah sebagai berikut:
constvar constvar = 32;
Dalam IE ini adalah kesalahan sintaksis.
【Pemrosesan yang kompatibel】 Jangan gunakan const, gunakan var sebagai gantinya.
4. Var
[Instruksi Analisis] Silakan lihat kode berikut:
Salinan kode adalah sebagai berikut:
echo = function (str) {
Document.write (str);
}
Fungsi ini berjalan secara normal pada IE, tetapi kesalahan dilaporkan di bawah Firefox.
[Pemrosesan yang kompatibel] Adalah normal untuk menambahkan VAR sebelum gema, dan ini adalah tujuan penyebutan VAR kami.
5. Masalah Const
[Catatan Analisis] Kata kunci const tidak dapat digunakan di IE. Misalnya, constvar constvar = 32; Dalam IE ini adalah kesalahan sintaksis.
【Solusi】 Jangan gunakan const, gunakan var sebagai gantinya.
2. Akses dan Pengaturan Gaya
1. Atribut "float" CSS
[Catatan Analisis] Sintaks paling dasar untuk JavaScript untuk mengakses nilai CSS yang diberikan adalah: Object.Style.Property, tetapi beberapa properti CSS sama dengan nama kata yang dipesan dalam JavaScript, seperti "float", "for", "class", dll., Dan metode penulisan berbeda dari browser yang berbeda.
Di IE, tulis ini:
Salinan kode adalah sebagai berikut:
document.geteLementById ("header"). style.stylefloat = "left";
Di Firefox, tulis ini:
Salinan kode adalah sebagai berikut:
document.geteLementById ("header"). style.cssfloat = "left";
[Pemrosesan Kompatibilitas] Tambahkan penilaian sebelum menulis untuk menentukan apakah browser itu yaitu:
Salinan kode adalah sebagai berikut:
if (document.all) {//
document.geteLementById ("header"). style.stylefloat = "left";
}
else {// tidak terdefinisi saat tidak yaitu
document.geteLementById ("header"). style.cssfloat = "left";
}
2. Akses "untuk" di tag <label>
[Catatan Analisis] Seperti atribut "float", itu juga mensyaratkan penggunaan perbedaan sintaks yang tidak terlihat untuk mengakses "untuk" dalam tag <label>.
Di IE, tulis ini:
Salinan kode adalah sebagai berikut:
var myobject = document.geteLementById ("mylabel");
var myattribute = myobject.getAttribute ("htmlfor");
Di Firefox, tulis ini:
Salinan kode adalah sebagai berikut:
var myobject = document.geteLementById ("mylabel");
var myattribute = myobject.getAttribute ("for");
[Pemrosesan Kompatibilitas] Solusinya adalah untuk terlebih dahulu menentukan jenis browser.
3. Akses dan atur properti kelas
[Catatan Analisis] Juga karena kelas adalah kata -kata yang dicadangkan JavaScript, kedua browser ini menggunakan metode JavaScript yang berbeda untuk mendapatkan properti ini.
Cara Menulis Semua Versi IE Sebelum IE8.0:
Salinan kode adalah sebagai berikut:
var myobject = document.geteLementById ("header");
var myattribute = myobject.getAttribute ("className");
Berlaku untuk IE8.0 dan Firefox Writing:
Salinan kode adalah sebagai berikut:
var myobject = document.geteLementById ("header");
var myattribute = myobject.getAttribute ("class");
Selain itu, saat mengatur atribut kelas menggunakan setAttribute (), kedua browser juga memiliki perbedaan yang sama.
Salinan kode adalah sebagai berikut:
setAttribute ("className", value);
Metode penulisan ini berlaku untuk semua versi IE sebelum IE8.0. Catatan: IE8.0 tidak mendukung atribut "ClassName".
setAttribute ("class", value); Cocok untuk IE8.0 dan Firefox.
【Pemrosesan yang kompatibel】
Metode 1, tulis keduanya:
Salinan kode adalah sebagai berikut:
var myobject = document.geteLementById ("header");
myobject.setAttribute ("class", "classValue");
MyObject.setAttribute ("ClassName", "ClassValue");
// Atur kelas header ke ClassValue
Metode 2: IE dan FF Support Object.ClassName, sehingga Anda dapat menulisnya seperti ini:
Salinan kode adalah sebagai berikut:
var myobject = document.geteLementById ("header");
MyObject.className = "ClassValue"; // Setel kelas header ke ClassValue
Metode 3: Pertama menilai jenis browser, dan kemudian gunakan metode penulisan yang sesuai sesuai dengan jenis browser.
4. Masalah Lebar dan Tinggi Objek
[Catatan analisis] Pernyataan yang mirip dengan obj.style.height = imgobj.height di firefox tidak valid.
【Pemrosesan Kompatibel】 Gunakan obj.style.height = imgobj.height + 'px';
5. Tambahkan gaya
[Catatan Analisis] Dalam IE, gunakan metode addrule () untuk menambahkan gaya, seperti: stylesheet.addrule ("p", "color: #ccc", stylesheet.length). Namun, metode ini tidak kompatibel dengan FF, dan menggunakan metode insetrule () untuk menggantinya dalam FF. Seperti stylesheet.insertrule ("p {color: #ccc}", stylesheet.length).
【Pemrosesan yang kompatibel】
Salinan kode adalah sebagai berikut:
if (stylesheet.insertrule) {
// Metode InserTrule ()
}kalau tidak{
// Metode addrule ()
}
6. Gaya terakhir
[Catatan Analisis] Terkadang gaya kustom kami akan gagal karena gaya tumpang tindih, seperti gaya yang ditentukan oleh pemilih kelas dan gaya yang ditentukan oleh pemilih label, dan yang terakhir tidak valid saat ini. Maka gaya terakhir perlu digunakan. Gaya terakhir dalam IE ditulis sebagai ele.currentstyle. nama atribut. Metode penulisan standar di DOM adalah menggunakan objek Document.DefaultView, seperti Document.DefaultView.GetComputedStyle (ELEL, NULL), yang kompatibel dengan FF.
[Pemrosesan Kompatibilitas] Pertama menilai browser (Document.all), dan kemudian jalankan metode di atas.
3. Metode Dom dan Referensi Objek
1. GetElementById
[Instruksi Analisis] Mari kita lihat satu set kode:
<!-Masukkan akses objek 1->
Salinan kode adalah sebagai berikut:
<input id = "id" type = "tombol"
value = "Klik Me" ōnClick = "Alert (ID.Value)"/>
Di Firefox, tombol tidak merespons, dalam IE, tidak apa -apa, karena untuk yaitu, ID elemen HTML dapat digunakan secara langsung sebagai nama variabel dalam skrip, tetapi tidak di Firefox.
[Pemrosesan Kompatibilitas] Cobalah untuk menggunakan penulisan W3C DOM. Saat mengakses objek, gunakan Document.GetElementById ("ID") untuk mengakses objek dengan ID, dan ID harus unik di halaman. Juga, saat mengakses objek dengan nama tag, gunakan Document.getElementsByTagname ("Div") [0]. Metode ini didukung oleh lebih banyak browser.
<!-Input Object Access 2->
Salinan kode adalah sebagai berikut:
<input id = "id" type = "tombol" value = "klik saya"
OnClick = "Alert (Document.GetElementById ('ID'). Value)" />
2. Akses Objek Kelas Koleksi
[Catatan Analisis] Di bawah IE, Anda dapat menggunakan () atau [] untuk mendapatkan objek kelas pengumpulan; Di bawah Firefox, Anda hanya dapat menggunakan [] untuk mendapatkan objek kelas pengumpulan. menyukai:
Document.write (Document.Forms ("FormName"). SRC);
// Metode penulisan ini dapat mengakses atribut SCRC dari objek formulir di bawah IE
【Pemrosesan Kompatibilitas】 Ubah Dokumen.Forms ("FormName") ke Document.forms ["FormName"]. Gunakan [] untuk mendapatkan objek kelas pengumpulan dengan cara yang terpadu.
3. Referensi bingkai
[Catatan Analisis] IE dapat mengakses objek jendela yang sesuai dengan bingkai ini melalui ID atau nama, sementara Firefox hanya dapat mengakses objek jendela yang sesuai dengan bingkai ini melalui nama.
Misalnya, jika tag bingkai di atas ditulis dalam HTM di jendela paling atas, Anda dapat mengaksesnya seperti ini:
Yaitu: window.top.frameid atau window.top.framename untuk mengakses objek jendela ini;
Firefox: Hanya window.top.framename yang dapat digunakan untuk mengakses objek jendela ini.
【Pemrosesan Kompatibel】 Gunakan nama bingkai untuk mengakses objek bingkai. Selain itu, baik IE dan Firefox dapat digunakan untuk membuat
window.document.getElementById ("frameid") untuk mengakses objek bingkai ini.
4. ParentElement
[Analisis Deskripsi] IE mendukung menggunakan ParentElement dan ParentNode untuk mendapatkan node orang tua. Firefox hanya dapat menggunakan ParentNode.
[Pemrosesan Kompatibilitas] Karena DOM dukungan Firefox dan IE, ParentNode digunakan untuk mengakses node induk.
5. Operasi Tabel
[Catatan Analisis] Dalam tabel di bawah IE, apakah itu dimasukkan dengan innerHTML atau AppendChild, tidak berpengaruh, tetapi browser lain menampilkannya secara normal.
[Pemrosesan Kompatibel] Solusinya adalah menambahkan <tr> ke elemen <tbody> tabel, seperti yang ditunjukkan di bawah ini:
Salinan kode adalah sebagai berikut:
var row = document.createElement ("tr");
var cell = document.createElement ("td");
var cell_text = document.createTextNode ("konten yang dimasukkan");
cell.appendChild (cell_text);
Row.AppendChild (sel);
document.getElementsbyTagname ("tbody") [0] .AppendChild (ROW);
6. Lepaskan node removenode () dan removechild ()
[Catatan Analisis] AppendNode dapat digunakan secara normal di IE dan Firefox, tetapi Removenode hanya dapat digunakan dalam IE.
Fungsi metode Removenode adalah untuk menghapus node, dengan sintaksnya menjadi node.romovenode (false) atau node.romovenode (true), dan nilai pengembalian adalah simpul yang dihapus.
Removenode (false) berarti bahwa hanya simpul yang ditentukan yang dihapus, dan kemudian simpul anak asli dari simpul ini dipromosikan ke simpul anak dari simpul induk asli.
Removenode (true) berarti menghapus node yang ditentukan dan semua node bawahannya. Node yang dihapus menjadi simpul yatim dan tidak lagi memiliki simpul anak dan simpul induk.
[Pemrosesan Kompatibilitas] Node di Firefox tidak memiliki metode Removenode, sehingga mereka hanya dapat diganti dengan metode Removechild. Pertama -tama kembali ke simpul induk dan lepaskan node yang akan dihapus dari node induk.
node.parentnode.removechild (node);
// Untuk menggunakan IE dan Firefox secara normal, ambil simpul induk dari lapisan sebelumnya dan kemudian hapus.
7. node diperoleh dengan pengasuhan anak
[Catatan Analisis] Makna subskrip Childnodes berbeda di IE dan Firefox. Mari kita lihat kode berikut:
Salinan kode adalah sebagai berikut:
<ul id = "main">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
<input type = value tombol = "Klik saya!" onClick =
"Peringatan (Document.GetElementById ('Main'). Childnodes.length)">
Berlari dengan IE dan Firefox masing -masing, hasil IE adalah 3, sedangkan Firefox adalah 7. Firefox menggunakan spesifikasi DOM, dan "#Text" berarti teks (sebenarnya ruang yang tidak berarti dan istirahat garis, dll.) Juga akan diuraikan ke dalam simpul di Firefox. Dalam IE, hanya teks dengan makna praktis yang akan diuraikan menjadi "#text".
【Pemrosesan yang kompatibel】
Metode 1: Saat mendapatkan node anak, Anda dapat menghindari masalah ini dengan node.getElementsbyTagname (). Namun, GetElementsByTagname jelas tidak sebagus menggunakan anak untuk melintasi struktur DOM yang kompleks, karena anak -anak dapat menangani hierarki DOM dengan lebih baik.
Metode 2. Dalam penggunaan aktual, ketika Firefox melintasi node anak, Anda mungkin juga menambahkannya ke loop:
if (childnode.nodename == "#text") Lanjutkan; // atau gunakan nodetype == 1.
Ini memungkinkan Anda untuk melewatkan beberapa node teks.
Bacaan lebih lanjut
"Perbedaan Antara Pengasuhan Anak di IE dan Firefox"
8. Firefox tidak dapat mendukung Innertext
[Catatan Analisis] Firefox tidak mendukung Innertext, ini mendukung TextContent untuk mengimplementasikan Innertext, tetapi TextContent tidak mempertimbangkan elemen seperti Innertext, sehingga tidak sepenuhnya kompatibel dengan IE. Jika Anda tidak menggunakan TextContent, string tidak berisi kode HTML, yang juga dapat diganti dengan innerHTML. Anda juga dapat menulis metode untuk mengimplementasikannya, silakan merujuk ke artikel "Menerapkan atribut Innertext untuk Firefox".
【Bandingkan pemrosesan】 Bandingkan dengan menilai jenis browser:
Salinan kode adalah sebagai berikut:
if (document.all) {
document.geteLementById ('elemen'). Innertext = "My Text";
} kalau tidak{
document.geteLementById ('elemen'). TextContent = "My Text";
}
4. Penanganan acara
Jika pemrosesan acara terlibat saat menggunakan JavaScript, Anda perlu mengetahui perbedaan antara peristiwa di browser yang berbeda. Ada tiga model acara JavaScript utama (lihat "Mendukung tiga model acara sekaligus", yaitu NN4, IE4+ dan W3C/Safar.
1. Window.event
【Instruksi Analisis】 Lihat sepotong kode terlebih dahulu
Salinan kode adalah sebagai berikut:
fungsi et ()
{
alert (event); // yaitu: [objek]
}
Hasil dari kode di atas yang berjalan di IE adalah [objek], tetapi tidak dapat dijalankan di Firefox.
Karena peristiwa dapat digunakan secara langsung sebagai properti dari objek jendela di IE, tetapi di Firefox, model W3C digunakan, yang menyebarkan peristiwa melalui metode parameter yang lewat, yaitu, Anda perlu menyediakan antarmuka respons acara untuk fungsi Anda.
[Pemrosesan Kompatibilitas] Tambahkan penilaian acara dan dapatkan acara yang benar sesuai dengan browser:
Salinan kode adalah sebagai berikut:
fungsi et ()
{
evt = evt? evt: (window.event? window.event: null);
// kompatibel dengan IE dan Firefox
Peringatan (EVT);
}
2. Akuisisi nilai keyboard
[Catatan Analisis] Metode mendapatkan nilai keyboard dari IE dan Firefox berbeda. Dapat dipahami bahwa acara tersebut. Yang di bawah Firefox setara dengan acara tersebut. Kode Kode di bawah IE. Untuk perbedaan masing -masing, silakan merujuk ke "Tes Kompatibilitas untuk Kode Key, yang dan Charcode dalam Acara Keyboard"
【Pemrosesan yang kompatibel】
Salinan kode adalah sebagai berikut:
function mykeypress (evt) {
// kompatibel dengan IE dan Firefox untuk mendapatkan objek keyboardevent
EVT = (EVT)? evt: ((window.event)? window.event: "")
// kompatibel dengan IE dan Firefox untuk mendapatkan nilai kunci dari objek keyboardevent
var key = evt.keycode? evt.keycode: evt.WHich;
if (evt.ctrlkey && (key == 13 || key == 10)) {
// ctrl dan enter ditekan secara bersamaan
// Lakukan sesuatu;
}
}
3. Mendapatkan Sumber Acara
[Catatan Analisis] Saat menggunakan delegasi acara, kami dapat menentukan elemen mana acara tersebut berasal dari perolehan sumber acara. Namun, di IE, objek acara memiliki properti srcelement, tetapi tidak ada properti target; Di Firefox, objek genap memiliki properti target, tetapi tidak ada properti srcelement.
【Pemrosesan yang kompatibel】
Salinan kode adalah sebagai berikut:
ele = function (evt) {// menangkap objek yang akting peristiwa saat ini
evt = evt || window.event;
Kembali
(obj = event.srcelement? event.srcelement: event.target;);
}
4. Pemantauan acara
[Catatan Analisis] Dalam hal mendengarkan dan memproses peristiwa, IE menyediakan dua antarmuka: AttachEvent dan Detachevent, sementara Firefox menyediakan AddEventListener dan RemestEventListener.
[Pemrosesan Kompatibilitas] Pemrosesan kompatibilitas paling sederhana adalah merangkum kedua set antarmuka ini:
Salinan kode adalah sebagai berikut:
Function AddEvent (Elem, EventName, Handler) {
if (elem.attachevent) {
elem.attachevent ("on" + eventName, function () {
handler.call (elem)});
// Gunakan Callback Function Call () di sini, biarkan hal ini ke Elem
} lain jika (elem.addeventListener) {
elem.addeventlistener (eventName, handler, false);
}
}
Fungsi RemestEvent (Elem, EventName, Handler) {
if (elem.detachevent) {
elem.detachevent ("on" + eventName, function () {
handler.call (elem)});
// Gunakan Callback Function Call () di sini, biarkan hal ini ke Elem
} lain jika (elem.removeeventlistener) {
elem.removeeventlistener (eventName, handler, false);
}
}
Perlu dicatat bahwa di bawah Firefox, ini dalam fungsi penanganan acara poin ke elemen yang didengarkan itu sendiri, tetapi di IE, Anda dapat menggunakan panggilan fungsi callback untuk membiarkan konteks saat ini menunjuk ke elemen yang didengarkan.
5. Posisi tikus
[Catatan Analisis] 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.
[Pemrosesan Kompatibilitas] Gunakan mx (mx = event.x? Event.x: event.pagex;) untuk mengganti event.x di bawah IE atau event.pagex di bawah firefox. Posisi absolut harus dipertimbangkan dalam titik kompleks
Salinan kode adalah sebagai berikut:
fungsi getabspoint (e) {
var x = e.offsetleft, y = e.offsettop;
while (e = E.OffsetParent) {
x += e.offsetleft;
y += e.offsettop;
}
peringatan ("x:" + x + "," + "y:" + y);
}
5. Kompatibilitas Perawatan Perbedaan Lainnya
1. XmlHttpRequest
[Catatan Analisis] ActiveXObject baru ("Microsoft.xmlhttp"); hanya berfungsi di IE. Firefox tidak mendukungnya, tetapi mendukung XmlHttpRequest.
【Pemrosesan yang kompatibel】
Salinan kode adalah sebagai berikut:
function createxhr () {
var xhr = null;
if (window.xmlHttpRequest) {
xhr = ActivexObject baru ("msxml2.xmlhttp");
}kalau tidak{
mencoba {
xhr = ActivexObject baru ("microsoft.xmlhttp");
}
menangkap() {
xhr = null;
}
}
if (! xhr) kembali;
mengembalikan xhr;
}
2. Jendela Modal dan Non-Modal
[Catatan Analisis] Dalam Windows IE, Modal dan Non-Modal dapat dibuka melalui Showmodaldialog dan ShowmodelessDialog, tetapi Firefox tidak mendukungnya.
[Solusi] Gunakan window.open (pageUrl, nama, parameter) untuk membuka jendela baru. Jika Anda perlu melewati parameter, Anda dapat menggunakan bingkai atau iframe.
3. Masalah atribut input.type
Properti Input.Type di bawah IE hanya baca, tetapi dapat dimodifikasi di bawah Firefox.
4. Opsi Operasi pada Elemen Pilih
Set opsi, IE dan Firefox ditulis secara berbeda:
Firefox: Dapat diatur secara langsung
Salinan kode adalah sebagai berikut:
option.text = 'foooooooooo';
Yaitu: hanya set
Salinan kode adalah sebagai berikut:
option.innerHtml = 'fooooooo';
Metode untuk menghapus opsi pilih:
Firefox: Ya
Salinan kode adalah sebagai berikut:
pilih.
IE7: dapat digunakan
Salinan kode adalah sebagai berikut:
SELECT.Options [i] = null;
IE6: perlu menulis
Salinan kode adalah sebagai berikut:
pilih.
5. Analisis Alt dan Judul Objek IMG
[Catatan Analisis] Objek IMG memiliki dua atribut: ALT dan Judul. Perbedaannya adalah bahwa alt: prompt ketika foto tidak ada atau beban tidak benar.
Judul: Deskripsi tip dari foto. Jika judulnya tidak didefinisikan dalam IE, ALT juga dapat digunakan sebagai ujung IMG, tetapi di Firefox, keduanya digunakan persis sesuai dengan definisi dalam standar.
Saat mendefinisikan objek IMG.
[Pemrosesan yang kompatibel] Yang terbaik adalah menulis semua objek alt dan judul untuk memastikan bahwa mereka dapat digunakan secara normal di berbagai browser.
6. Masalah refresh SRC IMG
[Instruksi Analisis] Mari kita lihat kode terlebih dahulu:
Salinan kode adalah sebagai berikut:
<img id = "pic" ontClick = "this.src = 'a.jpg'" src = "aa.jpg" style = "kursor: pointer"/>
Di bawah IE, kode ini dapat digunakan untuk menyegarkan gambar, tetapi tidak di bawah Firefox. Ini terutama masalah caching.
[Pemrosesan Kompatibilitas] Menambahkan nomor acak setelah alamat akan menyelesaikannya:
Salinan kode adalah sebagai berikut:
<img id = "pic" ontClick = "javascript: this.src = this.src+'?'+math.random ()" src = "a.jpg" style = "kursor: pointer"/>
Meringkaskan
Ada banyak perbedaan dalam javascript antara IE dan Firefox. Agar kompatibel, saya pikir perlu untuk mengatur beberapa yang umum ke dalam pustaka JS, seperti operasi DOM, pemrosesan acara, permintaan XMLHTTPREQUEST, dll., Atau Anda juga dapat memilih untuk menggunakan beberapa perpustakaan yang ada (seperti JQuery, Yui, ExtJs, dll.). Namun, saya pikir masih perlu untuk memahami perbedaan -perbedaan ini, yang sangat membantu bagi kami untuk berpartisipasi dalam kode kompatibilitas dan kegunaan.
Selalu ada lebih banyak solusi daripada masalah. Tidak peduli bagaimana browser kompatibel, pengembangan front-end selalu dapat diselesaikan!