innerHTML secara dinamik menambah kod html dan skrip yang serasi dengan berbilang kemahiran pelayar_javascript

Simptom: Apabila menetapkan nilai untuk innerHTML elemen, jika kod HTML yang disediakan mengandungi skrip js, banyak kali skrip ini tidak sah atau ia sah pada sesetengah penyemak imbas tetapi tidak pada penyemak imbas lain.

Punca: Penyemak imbas yang berbeza mempunyai cara yang berbeza untuk mengendalikan skrip yang dimasukkan ke dalam innerHTML. Selepas latihan, ia boleh diringkaskan seperti berikut:

Untuk IE, pertama sekali, teg skrip mesti mempunyai atribut tangguh, dan kedua, pada masa sisipan, nod yang dimiliki innerHTML mesti berada dalam pepohon DOM.

Untuk Firefox dan Opera, nod yang dimiliki innerHTML tidak boleh berada dalam pepohon DOM pada masa sisipan.

Berdasarkan kesimpulan di atas, kaedah innerHTML tetapan umum diberikan:

Salin kod Kod adalah seperti berikut:

/*
* Penerangan: Kaedah innerHTML tetapan penyemak imbas
* Benarkan dimasukkan kod HTML yang mengandungi skrip dan gaya
* Parameter:
* el: nod dalam pepohon DOM, tetapkan HTML dalamannya
* htmlKod: memasukkan kod HTML
*Pelayar yang diuji: ie5, firefox1.5, opera8.5
*/
var set_innerHTML = function (el, htmlCode)
{var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('msie') >= 0 && ua.indexOf('opera') < 0)
{htmlKod = '

for IE

' htmlCode;
htmlCode = htmlCode.replace(/]*)>/gi,'');
el.innerHTML = htmlKod;
el.removeChild(el.firstChild);
}
lain
{var el_next = el.nextSibling;
var el_parent = el.parentNode;
el_parent.removeChild(el);
el.innerHTML = htmlKod;
jika (el_next)
el_parent.insertBefore(el, el_next)
lain
el_parent.appendChild(el);
}
}

Terdapat satu lagi masalah dengan kod di atas: jika kod HTML yang dimasukkan mengandungi pernyataan document.write, ia akan memusnahkan keseluruhan halaman. Keadaan ini boleh dielakkan dengan mentakrifkan semula dokumen.tulis. Kodnya adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

/*
Penerangan: Takrif semula fungsi document.write.
Elakkan apabila menggunakan set_innerHTML, kod HTML yang dimasukkan mengandungi pernyataan document.write, menyebabkan halaman asal rosak.
*/
document.write = function(){
var body = document.getElementsByTagName('body')[0];
untuk (var i = 0; i < arguments.length; i ) {
hujah = hujah[i];
if (jenis hujah == 'rentetan') {
var el = body.appendChild(document.createElement('div'));
set_innerHTML(el, argument)
}
}
}