Analisis singkat tentang masalah kompatibilitas browser di JavaScript

Masalah kompatibilitas browser adalah bagian yang mudah diabaikan tetapi paling penting dalam pengembangan aktual. Sebelum kita berbicara tentang masalah kompatibilitas versi lama browser, pertama -tama kita harus memahami apa itu deteksi kemampuan. Ini untuk mendeteksi apakah browser memiliki kemampuan seperti itu, yaitu, untuk menentukan apakah browser saat ini mendukung atribut atau metode yang akan dipanggil. Berikut adalah beberapa perkenalan singkat.

1. Innertext and Innercontent

1) Fungsi Innertext dan Innercontent adalah sama

2) Dukungan Browser Innertext Sebelum IE8

3) Versi Lama Konten dari Dukungan Firefox

4) Versi baru browser mendukung kedua metode

 1 // Versi lama browser kompatibel dengan Innertext dan InnerContent2 if (element.textContent) {3 return element.textContent; 4} else {5 return element.innerText; 6}

2. Dapatkan masalah kompatibilitas node/elemen saudara

1) Node Brother, semua browser mendukung

①Stemberbling Node Brother berikutnya, yang mungkin merupakan simpul non-elemen; simpul teks akan diperoleh

② Sebelumnya Node saudara kandung sebelumnya mungkin merupakan simpul non-elemen; simpul teks akan diperoleh

2) Elemen saudara, IE8 tidak mendukung sebelumnya

① Elemementibling sebelumnya mendapatkan elemen saudara berikutnya dan mengabaikan kekosongan

②Stlexelementsibling mendapatkan elemen saudara yang berdekatan berikutnya dan mengabaikan kekosongan

 // Browser yang kompatibel // Dapatkan fungsi elemen Sibling berikutnya berikutnya GetNextElement (Element) {// Deteksi Kemampuan if (element.nextElementsibling) {return element.nextElementsibling; } else {var node = element.nextSibling; while (node ​​&& node.nodetype! == 1) {node = node.nextibling; } return node; }}

 /*** Kembalikan elemen sebelumnya*@param elemen*@returns {*}*/function getPreviousElement (elemen) {if (element.previouseLementsibling) {return element.previouseLementsibling; } else {var el = element.previoussibling; while (el && el.nodetype! == 1) {el = el.previoussibling; } return el; }}

 /*** Browser Kompatibel dengan elemen pertama FirstElementChild*@param Parent*@returns {*}*/function getFirStelement (Parent) {if (parent.firstelementChild) {return parent.firstelementChild; } else {var el = parent.firstChild; while (el && el.nodetype! == 1) {el = el.nextsibling; } return el; }}

 /*** Kembalikan elemen terakhir*@param Parent*@returns {*}*/function getLastElement (Parent) {if (parent.LastElementChild) {return parent.LastElementChild; } else {var el = parent.LastChild; while (el && el.nodetype! == 1) {el = el.previoussibling; } return el; }}

 /*** Dapatkan semua elemen saudara dari elemen saat ini*@param elemen*@returns {array}*/function saudara kandung (elemen) {if (! Elemen) kembali; var elemen = []; var el = elemen.PreviousSibling; while (el) {if (el.nodetype === 1) {elements.push (el); } el = el.prevevioussibling; } el = element.previoussibling; while (el) {if (el.nodetype === 1) {elements.push (el); } el = el.nextsibling; } el = element.previoussibling; } mengembalikan elemen;}

3. array.filter ();

// Uji semua elemen dengan fungsi yang ditentukan dan buat array baru yang berisi semua elemen yang lulus tes

 // kompatibel dengan lingkungan lama if (! Array.prototype.filter) {array.prototype.filter = function (fun/ *, thisarg */) {"Gunakan ketat"; if (this === void 0 || this === null) lempar typeError baru (); var t = objek (ini); var len = t.length >>> 0; if (typeof fun! == "function") lempar typeError baru (); var res = []; var thisarg = arguments.length> = 2? Argumen [1]: batal 0; untuk (var i = 0; i <len; i ++) {if (i in t) {var val = t [i]; // Catatan: Secara teknis ini harus objek.defineproperty at // indeks berikutnya, karena dorong dapat dipengaruhi oleh // properti pada objek.prototype dan array.prototype. // Tapi metode itu baru, dan tabrakan harus // langka, jadi gunakan alternatif yang lebih kompatibel. if (fun.call (thisarg, val, i, t)) res.push (val); }} return res; };}

4. Array.foreach ();

// lintasan array

 // Kompatibel dengan lingkungan lama // Langkah-langkah produksi ECMA-262, Edisi 5, 15.4.4.18// Referensi: http://es5.github.io/#x14.4.4.18if (! Array.prototype.foreach) {array.prototype.foreach = function (callback, thisarg) {array.prototype.foreach = function (callback, thisarg) {array.prototype.foreach = function (callback, thisarg) {array.prototype.foreach = function (callback, thisarg) if (this == null) {throw new typeError ('Ini null atau tidak didefinisikan'); } // 1. Biarkan o menjadi hasil dari panggilan toobject () melewati // | this | nilai sebagai argumen. var o = objek (ini); // 2. Biarkan LenValue menjadi hasil dari memanggil GET () Internal // Metode O dengan argumen "panjang". // 3. Biarkan Len menjadi Touint32 (LenValue). var len = o.length >>> 0; // 4. Jika iScallable (callback) salah, lempar pengecualian TypeError. // Lihat: http://es5.github.com/#x9.11 if (typeof callback! == "function") {throw new typeError (callback + 'bukan fungsi'); } // 5. Jika Thisarg disediakan, biarkan t thisarg; lain biarkan // t tidak terdefinisi. if (arguments.length> 1) {t = thisarg; } // 6. Misalkan k menjadi 0 k = 0; // 7. Ulangi, sementara k <len while (k <len) {var kvalue; // A. Biarkan PK menjadi tostring (k). // Ini tersirat untuk operator LHS dari operator // b. Biarkan KPRESENT menjadi hasil dari memanggil HasProperty // Metode Internal O dengan Argumen PK. // Langkah ini dapat dikombinasikan dengan c // c. Jika kPresent benar, maka jika (k in o) {// i. Biarkan kvalue menjadi hasil dari memanggil metode internal // o dengan argumen pk. kvalue = o [k]; // ii. Hubungi metode panggilan internal panggilan balik dengan t as // daftar nilai dan argumen ini yang berisi kvalue, k, dan o. callback.call (t, kvalue, k, o); } // D. Tingkatkan K oleh 1. K ++; } // 8. Kembalikan tidak ditentukan};}

5. Acara Pendaftaran

.addeventListener = function (ketik, pendengar, usecapture) {};

// Nama Acara Parameter Pertama

// Fungsi penangan event parameter kedua (pendengar)

// parameter ketiga benar menangkap gelembung palsu

// itu hanya akan didukung setelah IE9

// kompatibel dengan lingkungan lama

 var eventTools = {addeventListener: function (element, eventName, listener) {// deteksi kapasitas if (element.addeventListener) {element.addeventListener (eventName, listener, false); } else if (element.attachevent) {element.attachevent ("on" + eventName, pendengar); } else {element ["on" + eventName] = pendengar; }}, // Jika Anda ingin menghapus peristiwa, Anda tidak dapat menggunakan fungsi anonim RemestEventListener: function (element, eventName, listener) {if (element.removeeventListener) {element.removeeventlistener (eventName, listener, false); } else if (element.detachevent) {// ie8 sebelum mendaftar.Attachevent dan menghapus events.detachevent element.detachevent ("on"+eventName, pendengar); } else {element ["on" + eventName] = null; }}};

6. Objek acara

1) Parameter peristiwa E adalah objek acara, metode akuisisi standar

btn.onClick = function (e) {}

2) Tahap Acara E.EventPhase, IE8 tidak mendukungnya sebelumnya

3) E.Sarget selalu menjadi objek yang memicu acara (tombol diklik)

i) Sebelum IE8 Srcelement

ii) Kompatibel Browser

var target = e.target || window.event.srcelement;

 // Dapatkan objek acara yang kompatibel dengan browser getEvent: function (e) {return e || window.event; // cara standar untuk mendapatkan objek peristiwa E; window.event cara untuk mendapatkan objek acara sebelum IE8} // kompatibel dengan target getTarget: function (e) {return e.target || E.Srcelement; }

7. Dapatkan posisi mouse di halaman

① Posisi di Area Visual: E.Clientx E.Clienty

② Lokasi dalam dokumen:

i) E.Pagex E.Pagey

ii) Kompatibel Browser

 var scrolltop = document.documentelement.scrolltop || document.body.scrolltop; var pagey = e.clienty + scrolltop;

8. Dapatkan jarak untuk menggulir

 // Browser yang Kompatibel Var Scrolltop = Document.DocumentElement.scrolltop || document.body.scrolltop;

9. Batalkan pilihan teks

 // kompatibel dengan browser window.getSelection? window.getSelection (). RemoveAllranges (): document.selection.empty ();

[Ringkasan] Ini hanyalah ringkasan parsial, dan Anda juga akan menghadapi berbagai masalah kompatibilitas browser selama pengembangan aktual. Peramban yang berbeda juga akan mengalami masalah adaptasi yang berbeda pada PC dan ponsel. Ini menunggu sepatu anak -anak untuk menemukan dan meringkas ~~ Saya harap ini dapat membantu Anda. Tolong beri saya beberapa saran tentang kekurangan ~~~

Analisis singkat di atas tentang masalah kompatibilitas browser di JavaScript adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.