Ringkasan keserasian penyemak imbas JavaScript dan kemahiran analisis_javascript keserasian pelayar biasa

Artikel ini ialah kompilasi harian oleh editor Script House tentang isu keserasian js dan analisis keserasian penyemak imbas yang biasa digunakan seperti IE dan Firefox yang berminat dengan pengetahuan tentang keserasian penyemak imbas js harus belajar bersama!

1. kanak-kanak dan childNodes

Tingkah laku kanak-kanak, childNodes yang disediakan oleh IE dan childNodes di bawah firefox adalah berbeza. ChildNodes di bawah firefox akan mengira baris baharu dan aksara ruang kosong sebagai nod anak nod induk, manakala childNodes dan anak IE tidak. Contohnya:

<div id="dd">
<div>yizhu2000</div>
</div> 

Div dengan d sebagai dd dilihat menggunakan childNodes di bawah IE Bilangan nod anak ialah 1, manakala di bawah ff ialah tiga Kita dapat melihat daripada pemapar dom firefox bahawa childNodesnya ialah ["n", div , "n"].

Untuk mensimulasikan atribut kanak-kanak dalam Firefox kita boleh melakukan ini:

if (typeof(HTMLElement) != "undefined" && !window.opera) {
HTMLElement.prototype.__defineGetter__("children", function() {
for (var a = [], j = 0, n, i = 0; i < this.childNodes.length; i++) {
n = this.childNodes[i];
if (n.nodeType == 1) {
a[j++] = n;
if (n.name) {
if (!a[n.name])
a[n.name] = [];
a[n.name][a[n.name].length] = n;
}
if (n.id)
a[n.id] = n;
}
}
return a;
});
} 

2. Kejadian firefox dan iaitu

window.event hanya boleh digunakan di bawah IE, tetapi bukan di bawah Firefox Ini kerana acara Firefox hanya boleh digunakan di tempat kejadian berlaku. Firefox mesti menambah peristiwa daripada sumber untuk lulus parameter. IE mengabaikan parameter ini dan menggunakan window.event untuk membaca acara.

Sebagai contoh, berikut ialah cara untuk mendapatkan kedudukan tetikus di bawah IE:

<button onclick="onClick()" >获得鼠标点击横坐标</button>
<script type="text/javascript">
function onclick(){
alert(event.clientX);
}
</script> 

perlu ditukar kepada

<button onclick="onClick(event)">获得OuterHTML</button>
<script type="text/javascript">
function onclick(event){
event = event || window.event;
alert(event.clientX);
}
</script> 

boleh digunakan dalam kedua-dua penyemak imbas

3.Masalah pemerolehan objek HTML

dokumen kaedah pemerolehan FireFox.getElementById("idName")

iaitu gunakan document.idname atau document.getElementById("idName")

Penyelesaian: Gunakan document.getElementById("idName");

4. masalah const

Di bawah Firefox, anda boleh menggunakan kata kunci const atau kata kunci var untuk menentukan pemalar

Di bawah IE, anda hanya boleh menggunakan kata kunci var untuk mentakrifkan pemalar

Penyelesaian: Gunakan kata kunci var secara seragam untuk menentukan pemalar.

5.masalah bingkai

Ambil bingkai berikut sebagai contoh:

<frame src="xxx.html" id="frameId" name="frameName" /> 

a) Akses objek bingkai

IE: Gunakan window.frameId atau window.frameName untuk mengakses objek frameId dan frameName boleh mempunyai nama yang sama;

;

b) Tukar kandungan bingkai

Jika anda perlu menghantar parameter dalam bingkai kembali ke tetingkap induk (perhatikan bahawa ia bukan pembuka, tetapi induk), anda boleh menggunakan induk dalam bingkai untuk mengakses tetingkap induk. Contohnya:

parent.document.form1.filename.value="Aqing";

Tubuh Firefox wujud sebelum teg badan dibaca sepenuhnya oleh penyemak imbas;

7 Perbezaan antara elemen induk (parentElement) firefox dan IE

IE: obj.parentElement

firefox:obj.parentNode

Penyelesaian: Kerana kedua-dua firefox dan IE menyokong DOM, mereka semua menggunakan obj.parentNode

8.Masalah InnerTeks

innerText boleh berfungsi seperti biasa dalam IE, tetapi innerText tidak berfungsi dalam FireFox, anda perlu menggunakan textContent

if (navigator.appName.indexOf("Explorer") > -1) {
document.getElementById('element').innerText = "my text";
} else {
document.getElementById('element').textContent = "my text";
} 

var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} elseif (window.ActiveXObject) { // IE的获取方式
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}