快捷導(dǎo)航

讓插入到 innerHTML 中的 script 跑起來的代碼

更新時(shí)間：2007年11月20日 15:04:06 作者：

如果按照前面的方式實(shí)現(xiàn)，對(duì)于大多數(shù)腳本來說可以正常執(zhí)行了。但是如果 script 中帶有 defer 屬性，IE 會(huì)自己運(yùn)行那段代碼（前面提過了），因此它會(huì)打亂執(zhí)行的順序。另外 document.write 和 document.writeln 寫入的代碼都回被添加到最后面，而不是腳本所在的位置上，因此這也是個(gè)問題。

為了解決這兩個(gè)問題，我們需要對(duì)前面的解決方法作一些改變。首先我們不能先把內(nèi)容賦值給 innerHTML，然后再通過它取腳本了，我們需要直接對(duì)內(nèi)容分析來取出腳本。另外，腳本以外的 HTML 部分也不能直接賦值給 innerHTML，需要在腳本執(zhí)行以后，將原有的 HTML 內(nèi)容和 document.write\writeln 寫的內(nèi)容按照順序合并到一起再賦值給 innerHTML，這里要注意，我們不能一部分一部分的將這些內(nèi)容連接到 innerHTML 后面，因?yàn)槠渲锌赡苡邪雮€(gè)標(biāo)簽的內(nèi)容，這種情況下，瀏覽器很容易發(fā)生錯(cuò)誤。而且你會(huì)看到頁面反復(fù)刷新的情況出現(xiàn)。而如果先放入緩沖區(qū)，最后一次賦給 innerHTML，就不會(huì)出現(xiàn)這種問題了。

另外放入緩沖區(qū)的好處是，當(dāng)腳本執(zhí)行完后，可以檢查緩沖區(qū)中是否還有新的腳本，如果有，再遞歸執(zhí)行，這樣就可以解決 document.write 和 document.writeln 寫的腳本也可以執(zhí)行的問題了。

2006-6-4 更新：

修正了插入到 innerHTML 中的腳本無法獲取插入到 innerHTML 中對(duì)象的問題。（感謝網(wǎng)友 DE 的提醒）。

增加了對(duì)同一容器中內(nèi)容設(shè)置的共享鎖，使得連續(xù)設(shè)置同一個(gè)容器內(nèi)的時(shí)，不會(huì)再發(fā)生沖突。（感謝新加坡網(wǎng)友 Jason Li 的提醒）。

2006-5-29 更新：

增加了使用外部腳本緩存功能，提高了第二次加載相同外部腳本的速度。

2006-5-23 更新：

在熱心的使用者 johnZEN 的提醒下，增加了共享鎖，使得同時(shí)設(shè)置多個(gè)容器內(nèi)的內(nèi)容時(shí)，不會(huì)再發(fā)生沖突。

在網(wǎng)友 udbjatwfn 的提醒下，修正了 IE 中存在的內(nèi)部腳本執(zhí)行作用域錯(cuò)誤的問題。

下面是最后本人的實(shí)現(xiàn)代碼：

下載: innerhtml.js

復(fù)制代碼代碼如下:

/* 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);  
} 