الأعراض: عند تعيين قيمة لـ InnerHTML لعنصر ، إذا كان رمز HTML المقدم يحتوي على نصوص JS ، فإن هذه البرامج النصية في كثير من الأحيان غير صالحة ، أو تكون صالحة في بعض المتصفح ، ولكن ليس على المتصفحات الأخرى.
السبب: المتصفحات المختلفة لها طرق مختلفة للتعامل مع البرامج النصية التي تم إدراجها في InnerHTML. بعد الممارسة ، يتم تلخيصها على النحو التالي:
بالنسبة إلى IE ، أولاً ، يجب أن يكون لعلامة البرنامج النصي سمة تأجيل ، وثانياً ، في لحظة الإدراج ، يجب أن تكون العقدة الداخلية في شجرة DOM.
بالنسبة إلى Firefox و Opera ، لا يُسمح لـ InnerHTML بأن تكون في شجرة DOM في لحظة الإدراج.
وفقًا للاستنتاج أعلاه ، يتم إعطاء طريقة عامة لإعداد InnerHTML:
نسخة الكود كما يلي:
/*
* الوصف: طريقة إعداد المستعرض المتقاطع innerhtml
* يسمح بإدخال رمز 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"> for ie </viv>' + htmlcode ؛
htmlcode = htmlcode.replace (/<script ([^>]*)>/gi ، '<script $ 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 المدرج يحتوي على بيان مستند. الكتابة ، فسوف يدمر الصفحة بأكملها. لهذه الحالة ، يمكن تجنبها عن طريق إعادة تعريف المستند. الرمز كما يلي:
نسخة الكود كما يلي:
/*
الوصف: إعادة تعريف دالة المستند.
تجنب استخدام set_innerhtml ، يحتوي إدخال رمز HTML على بيانات المستند. الكتابة ، مما يتسبب في تالف الصفحة الأصلية.
*/
document.write = function () {
var body = document.getElementSbyTagName ('body') [0] ؛
لـ (var i = 0 ؛ i <enduments.length ؛ i ++) {
الحجة = الحجج [i] ؛
if (typeof pINCIMINE == 'string') {
var el = body.appendChild (document.createElement ('div')) ؛
set_innerhtml (EL ، وسيطة)
}
}
}