Gejala: Saat menetapkan nilai untuk bagian dalam elemen, jika kode HTML yang disediakan berisi skrip JS, berkali -kali skrip ini tidak valid, atau valid pada beberapa browser, tetapi tidak pada browser lain.
Penyebab: Browser yang berbeda memiliki cara penanganan skrip yang berbeda yang dimasukkan ke dalam HinHTML. Setelah latihan, itu dirangkum sebagai berikut:
Untuk yaitu, pertama, tag skrip harus memiliki atribut tundukan, dan kedua, pada saat penyisipan, simpul yang harus ada di pohon dom.
Untuk Firefox dan Opera, simpul yang tidak diizinkan berada di pohon DOM pada saat penyisipan.
Menurut kesimpulan di atas, metode umum untuk mengatur innerHTML diberikan:
Salinan kode adalah sebagai berikut:
/*
* Deskripsi: Metode Pengaturan Cross-Browser InnerHTML
* Memungkinkan penyisipan kode HTML untuk memasukkan skrip dan gaya
* Parameter:
* EL: Node di pohon DOM, atur bagian dalamnya
* htmlcode: kode html yang dimasukkan
* Browser yang Diuji: IE5+, Firefox1.5+, Opera8.5+
*/
var set_innerhtml = fungsi (el, htmlcode)
{var ua = navigator.useragent.tolowercase ();
if (ua.indexof ('msie')> = 0 && ua.indexof ('opera') <0)
{htmlcode = '<div style = "display: none"> for Ie </div>' + htmlcode;
htmlcode = htmlcode.replace (/<skrip ([^>]*)>/gi, '<skrip $ 1 tunda = "true">');
el.innerHtml = htmlcode;
el.removechild (el.firstchild);
}
kalau tidak
{var el_next = el.nextsibling;
var el_parent = el.parentnode;
el_parent.removechild (el);
el.innerHtml = htmlcode;
if (el_next)
el_parent.insertbefore (el, el_next)
kalau tidak
el_parent.appendchild (el);
}
}
Ada masalah lain dengan kode di atas: jika kode HTML yang dimasukkan berisi dokumen. Pernyataan penulisan, itu akan menghancurkan seluruh halaman. Untuk kasus ini, dapat dihindari dengan mendefinisikan ulang dokumen. Kodenya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
/*
Deskripsi: Mendefinisikan ulang fungsi dokumen.
Hindari menggunakan SET_INNERHTML, memasukkan kode HTML berisi pernyataan dokumen. Pernyataan penulis, menyebabkan halaman asli rusak.
*/
document.write = function () {
var body = document.getElementsbyTagname ('body') [0];
untuk (var i = 0; i <arguments.length; i ++) {
argumen = argumen [i];
if (typeof argumen == 'string') {
var el = body.appendChild (document.createelement ('div'));
set_innerhtml (el, argumen)
}
}
}