让插入到 innerHTML 中的 script 跑起来

如果按照前面的方式实现，对于大多数脚本来说可以正常执行了。但是如果 script 中带有 defer 属性，IE 会自己运行那段代码（前面提过了），因此它会打乱执行的顺序。另外 document.write 和 document.writeln 写入的代码都回被添加到最后面，而不是脚本所在的位置上，因此这也是个问题。  

为了解决这两个问题，我们需要对前面的解决方法作一些改变。首先我们不能先把内容赋值给 innerHTML，然后再通过它取脚本了，我们需要直接对内容分析来取出脚本。另外，脚本以外的 HTML 部分也不能直接赋值给 innerHTML，需要在脚本执行以后，将原有的 HTML 内容和 document.write\writeln 写的内容按照顺序合并到一起再赋值给 innerHTML，这里要注意，我们不能一部分一部分的将这些内容连接到 innerHTML 后面，因为其中可能有半个标签的内容，这种情况下，浏览器很容易发生错误。而且你会看到页面反复刷新的情况出现。而如果先放入缓冲区，最后一次赋给 innerHTML，就不会出现这种问题了。 

另外放入缓冲区的好处是，当脚本执行完后，可以检查缓冲区中是否还有新的脚本，如果有，再递归执行，这样就可以解决 document.write 和 document.writeln 写的脚本也可以执行的问题了。 

2006-6-4 更新： 

修正了插入到 innerHTML 中的脚本无法获取插入到 innerHTML 中对象的问题。（感谢网友 DE 的提醒）。 

增加了对同一容器中内容设置的共享锁，使得连续设置同一个容器内的时，不会再发生冲突。（感谢新加坡网友 Jason Li 的提醒）。 

2006-5-29 更新： 

增加了使用外部脚本缓存功能，提高了第二次加载相同外部脚本的速度。 

2006-5-23 更新： 

在热心的使用者 johnZEN 的提醒下，增加了共享锁，使得同时设置多个容器内的内容时，不会再发生冲突。 

在网友 udbjatwfn 的提醒下，修正了 IE 中存在的内部脚本执行作用域错误的问题。 

下面是最后本人的实现代码： 

下载: innerhtml.js 
/* 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); 
} 
演示程序地址：Demo 

不过感觉本人的实现过于笨拙， Ajax Wing: 跨浏览器的设置innerHTML方法 的实现更精辟一些，效果也更好，本人实在是非常的佩服！不过这个实现有一点问题就是脚本中的 document.write 和 document.writeln 缩写的内容位置是不对的。