อาการ: เมื่อตั้งค่าค่าสำหรับ innerHTML ขององค์ประกอบหากรหัส HTML ที่ให้ไว้มีสคริปต์ JS หลายครั้งสคริปต์เหล่านี้ไม่ถูกต้องหรือใช้ได้กับเบราว์เซอร์บางตัว แต่ไม่ได้อยู่ในเบราว์เซอร์อื่น ๆ
สาเหตุ: เบราว์เซอร์ที่แตกต่างกันมีวิธีการจัดการสคริปต์ที่แตกต่างกันแทรกลงใน InnerHTML หลังจากฝึกซ้อมมันจะสรุปดังนี้:
สำหรับ IE ก่อนอื่นแท็กสคริปต์จะต้องมีแอตทริบิวต์เลื่อนและประการที่สองในขณะที่การแทรกโหนดที่ innerhtml จะต้องอยู่ในทรี DOM
สำหรับ Firefox และ Opera โหนดที่ไม่ได้รับอนุญาตให้อยู่ในต้นไม้ DOM ในช่วงเวลาของการแทรก
ตามข้อสรุปข้างต้นวิธีการทั่วไปสำหรับการตั้งค่า innerhtml จะได้รับ:
การคัดลอกรหัสมีดังนี้:
-
* คำอธิบาย: การตั้งค่า cross-browser innerhtml method
* อนุญาตให้แทรกรหัส HTML รวมสคริปต์และสไตล์
* พารามิเตอร์:
* EL: โหนดในต้นไม้ DOM ตั้งค่า innerhtml
* htmlcode: แทรกรหัส HTML
* เบราว์เซอร์ที่ทดสอบแล้ว: 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)
{htmlCode = '<div style = "display: none"> สำหรับ IE </div>' + htmlCode;
htmlCode = htmlCode.replace (/<script ([^>]*)>/gi, '<สคริปต์ $ 1 defer = "true">');
El.InnerHtml = htmlCode;
El.RemoveChild (El.Firstchild);
-
อื่น
{var el_next = el.nextsibling;
var el_parent = el.parentNode;
el_parent.removeChild (EL);
El.InnerHtml = htmlCode;
ถ้า (el_next)
el_parent.insertbefore (el, el_next)
อื่น
el_parent.AppendChild (EL);
-
-
มีปัญหาอื่นเกี่ยวกับรหัสข้างต้น: หากรหัส HTML ที่แทรกมีเอกสารคำสั่ง WWRITE มันจะทำลายทั้งหน้า สำหรับกรณีนี้สามารถหลีกเลี่ยงได้โดยการกำหนดเอกสารใหม่เขียน รหัสมีดังนี้:
การคัดลอกรหัสมีดังนี้:
-
คำอธิบาย: นิยามใหม่ฟังก์ชั่นการเขียน
หลีกเลี่ยงการใช้ set_innerhtml, การแทรกรหัส HTML มี document.write คำสั่งทำให้หน้าต้นฉบับเสียหาย
-
document.write = function () {
var body = document.getElementsByTagname ('body') [0];
สำหรับ (var i = 0; i <arguments.length; i ++) {
อาร์กิวเมนต์ = อาร์กิวเมนต์ [i];
if (typeof rigment == 'string') {
var el = body.appendchild (document.createelement ('div'));
set_innerhtml (el, อาร์กิวเมนต์)
-
-
-