這個(gè)問題在某些時(shí)候微不足道，甚至可以忽略，但有些時(shí)候，這個(gè)問題就非常嚴(yán)重，它很可能讓我們的程序得不到預(yù)期的結(jié)果。因此我們需要解決這個(gè)問題。
如果你讀過 MSDN，你會(huì)發(fā)現(xiàn)并非所有插入到 innerHTML 中的腳本都不能執(zhí)行，如果這段腳本的 script 標(biāo)簽中包含了 defer 屬性，IE 會(huì)正確的執(zhí)行這些腳本程序。但不幸的是，Moziila/Firefox 和 Opera 可不吃這一套，不管 script 標(biāo)簽有沒有設(shè)置 defer 屬性，這些瀏覽器都不會(huì)向 IE 那樣去執(zhí)行插入到 innerHTML 中的腳本。
但不管腳本是否被執(zhí)行了，有一點(diǎn)我們可以肯定，那就是這些腳本確實(shí)被插入到了 innerHTML 中，如果不相信，你可以 alert 一下看看。但如果你真的 alert 了，你也可能會(huì)發(fā)現(xiàn)有一種例外情況存在，那就是如果腳本在 innerHTML 內(nèi)容開頭的話，那么 IE 瀏覽器將會(huì)忽略掉這段腳本，而 Moziila/Firefox 和 Opera 卻不會(huì)。
好了，問題分析的差不多了，我們來看看如何解決吧。
解決的思路其實(shí)很簡(jiǎn)單，那就是將插入到 innerHTML 中的所有腳本取出來，然后一一執(zhí)行。不過我們先要解決上面的兩個(gè)問題。
先來看第一個(gè)問題，如何避免在 IE 中重復(fù)執(zhí)行 innerHTML 中帶有 defer 屬性的腳本。這個(gè)很容易，只需要先確定瀏覽器是否是 IE，然后再檢測(cè)將要執(zhí)行的腳本是否帶有 defer 屬性即可。需要注意的是，在判斷 IE 瀏覽器時(shí)，我們需要避免被 opera 的瀏覽器識(shí)別欺騙。這一點(diǎn)我們?cè)诤竺娴拇a中將會(huì)看到它是如何做的。
接下來，看 IE 忽略 innerHTML 開頭腳本的問題，這個(gè)也很容易解決。只需要在要插入到 innerHTML 中的內(nèi)容的開頭附加一段不是腳本的內(nèi)容，就可以了。但不要試圖附加一個(gè)空內(nèi)容的標(biāo)簽，或者空格、回車、換行等，這將不起作用，開頭的腳本仍然會(huì)被忽略。也不要試圖附加 ，雖然這可以讓開頭的腳本不再被忽略，但這個(gè) 仍然會(huì)影響原有內(nèi)容的顯示，雖然你可能覺得不明顯，但是對(duì)于挑剔的用戶來說，這可能是無法容忍的。因此，為了讓附加的內(nèi)容既可以起到避免開頭腳本被忽略的功能，又不會(huì)造成不良影響，我們將附加這么一段內(nèi)容：
/* innerhtml.js
* Copyright Ma Bingyao <andot@ujn.edu.cn>
* Version: 1.9
* LastModified: 2006-06-04
* This library is free. You can redistribute it and/or modify it.
* http://www.coolcode.cn/?p=117
*/
var global_html_pool = [];
var global_script_pool = [];
var global_script_src_pool = [];
var global_lock_pool = [];
var innerhtml_lock = null;
var document_buffer = "";
function set_innerHTML(obj_id, html, time) {
if (innerhtml_lock == null) {
innerhtml_lock = obj_id;
}
else if (typeof(time) == "undefined") {
global_lock_pool[obj_id + "_html"] = html;
window.setTimeout("set_innerHTML('" + obj_id + "', global_lock_pool['" + obj_id + "_html']);", 10);
return;
}
else if (innerhtml_lock != obj_id) {
global_lock_pool[obj_id + "_html"] = html;
window.setTimeout("set_innerHTML('" + obj_id + "', global_lock_pool['" + obj_id + "_html'], " + time + ");", 10);
return;
}
function get_script_id() {
return "script_" + (new Date()).getTime().toString(36)
+ Math.floor(Math.random() * 100000000).toString(36);
}
document_buffer = "";
document.write = function (str) {
document_buffer += str;
}
document.writeln = function (str) {
document_buffer += str + "/n";
}
global_html_pool = [];
var scripts = [];
html = html.split(/<//script>/i);
for (var i = 0; i < html.length; i++) {
global_html_pool[i] = html[i].replace(/<script[/s/S]*$/ig, "");
scripts[i] = {text: '', src: '' };
scripts[i].text = html[i].substr(global_html_pool[i].length);
scripts[i].src = scripts[i].text.substr(0, scripts[i].text.indexOf('>') + 1);
scripts[i].src = scripts[i].src.match(/src/s*=/s*(/"([^/"]*)/"|/'([^/']*)/'|([^/s]*)[/s>])/i);
if (scripts[i].src) {
if (scripts[i].src[2]) {
scripts[i].src = scripts[i].src[2];
}
else if (scripts[i].src[3]) {
scripts[i].src = scripts[i].src[3];
}
else if (scripts[i].src[4]) {
scripts[i].src = scripts[i].src[4];
}
else {
scripts[i].src = "";
}
scripts[i].text = "";
}
else {
scripts[i].src = "";
scripts[i].text = scripts[i].text.substr(scripts[i].text.indexOf('>') + 1);
scripts[i].text = scripts[i].text.replace(/^/s*</!--/s*/g, "");
}
}
var s;
if (typeof(time) == "undefined") {
s = 0;
}
else {
s = time;
}
var script, add_script, remove_script;
for (var i = 0; i < scripts.length; i++) {
var add_html = "document_buffer += global_html_pool[" + i + "];/n";
add_html += "document.getElementById('" + obj_id + "').innerHTML = document_buffer;/n";
script = document.createElement("script");
if (scripts[i].src) {
script.src = scripts[i].src;
if (typeof(global_script_src_pool[script.src]) == "undefined") {
global_script_src_pool[script.src] = true;
s += 2000;
}
else {
s += 10;
}
}
else {
script.text = scripts[i].text;
s += 10;
}
script.defer = true;
script.type = "text/javascript";
script.id = get_script_id();
global_script_pool[script.id] = script;
add_script = add_html;
add_script += "document.getElementsByTagName('head').item(0)";
add_script += ".appendChild(global_script_pool['" + script.id + "']);/n";
window.setTimeout(add_script, s);
remove_script = "document.getElementsByTagName('head').item(0)";
remove_script += ".removeChild(document.getElementById('" + script.id + "'));/n";
remove_script += "delete global_script_pool['" + script.id + "'];/n";
window.setTimeout(remove_script, s + 10000);
}
var end_script = "if (document_buffer.match(/<///script>/i)) {/n";
end_script += "set_innerHTML('" + obj_id + "', document_buffer, " + s + ");/n";
end_script += "}/n";
end_script += "else {/n";
end_script += "document.getElementById('" + obj_id + "').innerHTML = document_buffer;/n";
end_script += "innerhtml_lock = null;/n";
end_script += "}";
window.setTimeout(end_script, s);
}
/*
* 描述：跨瀏覽器的設(shè)置 innerHTML 方法
* 允許插入的 HTML 代碼中包含 script 和 style
* 作者：kenxu <ken@ajaxwing.com>
* 日期：2006-03-23
* 參數(shù)：
* el: 合法的 DOM 樹中的節(jié)點(diǎn)
* htmlCode: 合法的 HTML 代碼
* 經(jīng)測(cè)試的瀏覽器：ie5+, firefox1.5+, opera8.5+
*/
var setInnerHTML = function (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(/<script([^>]*)>/gi,
'<script$1 defer>');
el.innerHTML = htmlCode;
el.removeChild(el.firstChild);
} else {
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)
} else {
el_parent.appendChild(el);
}
}
}
