Javascript - 运行innerHTML中的script

1. /* innerhtml.js
2. * Copyright Ma Bingyao <andot@ujn.edu.cn>
3. * Version: 1.9
4. * LastModified: 2006-06-04
5. * This library is free.  You can redistribute it and/or modify it.
6. * http://www.coolcode.cn/?p=117
7. */
9. var global_html_pool = [];
10. var global_script_pool = [];
11. var global_script_src_pool = [];
12. var global_lock_pool = [];
13. var innerhtml_lock = null;
14. var document_buffer = "";
16. function set_innerHTML(obj_id, html, time) {
17.     if (innerhtml_lock == null) {
18.         innerhtml_lock = obj_id;
19.     }
20.     else if (typeof(time) == "undefined") {
21.         global_lock_pool[obj_id + "_html"] = html;
22.         window.setTimeout("set_innerHTML('" + obj_id + "', global_lock_pool['" + obj_id + "_html']);", 10);
23.         return;
24.     }
25.     else if (innerhtml_lock != obj_id) {
26.         global_lock_pool[obj_id + "_html"] = html;
27.         window.setTimeout("set_innerHTML('" + obj_id + "', global_lock_pool['" + obj_id + "_html'], " + time + ");", 10);
28.         return;
29.     }
31.     function get_script_id() {
32.         return "script_" + (new Date()).getTime().toString(36)
33.           + Math.floor(Math.random() * 100000000).toString(36);
34.     }
36.     document_buffer = "";
38.     document.write = function (str) {
39.         document_buffer += str;
40.     }
41.     document.writeln = function (str) {
42.         document_buffer += str + "\n";
43.     }
45.     global_html_pool = [];
47.     var scripts = [];
48.     html = html.split(/<\/script>/i);
49.     for (var i = 0; i < html.length; i++) {
50.         global_html_pool[i] = html[i].replace(/<script[\s\S]*$/ig, "");
51.         scripts[i] = {text: '', src: '' };
52.         scripts[i].text = html[i].substr(global_html_pool[i].length);
53.         scripts[i].src = scripts[i].text.substr(0, scripts[i].text.indexOf('>') + 1);
54.         scripts[i].src = scripts[i].src.match(/src\s*=\s*(\"([^\"]*)\"|\'([^\']*)\'|([^\s]*)[\s>])/i);
55.         if (scripts[i].src) {
56.             if (scripts[i].src[2]) {
57.                 scripts[i].src = scripts[i].src[2];
58.             }
59.             else if (scripts[i].src[3]) {
60.                 scripts[i].src = scripts[i].src[3];
61.             }
62.             else if (scripts[i].src[4]) {
63.                 scripts[i].src = scripts[i].src[4];
64.             }
65.             else {
66.                 scripts[i].src = "";
67.             }
68.             scripts[i].text = "";
69.         }
70.         else {
71.             scripts[i].src = "";
72.             scripts[i].text = scripts[i].text.substr(scripts[i].text.indexOf('>') + 1);
73.             scripts[i].text = scripts[i].text.replace(/^\s*<\!--\s*/g, "");
74.         }
75.     }
77.     var s;
78.     if (typeof(time) == "undefined") {
79.         s = 0;
80.     }
81.     else {
82.         s = time;
83.     }
85.     var script, add_script, remove_script;
87.     for (var i = 0; i < scripts.length; i++) {
88.         var add_html = "document_buffer += global_html_pool[" + i + "];\n";
89.         add_html += "document.getElementById('" + obj_id + "').innerHTML = document_buffer;\n";
90.         script = document.createElement("script");
91.         if (scripts[i].src) {
92.             script.src = scripts[i].src;
93.             if (typeof(global_script_src_pool[script.src]) == "undefined") {
94.                 global_script_src_pool[script.src] = true;
95.                 s += 2000;
96.             }
97.             else {
98.                 s += 10;
99.             }
100.         }
101.         else {
102.             script.text = scripts[i].text;
103.             s += 10;
104.         }
105.         script.defer = true;
106.         script.type =  "text/javascript";
107.         script.id = get_script_id();
108.         global_script_pool[script.id] = script;
109.         add_script = add_html;
110.         add_script += "document.getElementsByTagName('head').item(0)";
111.         add_script += ".appendChild(global_script_pool['" + script.id + "']);\n";
112.         window.setTimeout(add_script, s);
113.         remove_script = "document.getElementsByTagName('head').item(0)";
114.         remove_script += ".removeChild(document.getElementById('" + script.id + "'));\n";
115.         remove_script += "delete global_script_pool['" + script.id + "'];\n";
116.         window.setTimeout(remove_script, s + 10000);
117.     }
119.     var end_script = "if (document_buffer.match(/<\\/script>/i)) {\n";
120.     end_script += "set_innerHTML('" + obj_id + "', document_buffer, " + s + ");\n";
121.     end_script += "}\n";
122.     end_script += "else {\n";
123.     end_script += "document.getElementById('" + obj_id + "').innerHTML = document_buffer;\n";
124.     end_script += "innerhtml_lock = null;\n";
125.     end_script += "}";
126.     window.setTimeout(end_script, s);
127. }
     

作者修正

2006-6-4 更新：

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

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

2006-5-29 更新：

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

2006-5-23 更新：

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

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

作者代码原贴地址：http://www.coolcode.cn/?p=117&cp=all#pp0

今天在写AJAX的时候，碰到了obj.innerHTML = response.text时，如果返回的代码中，有<script>内容，则无法执行，网上看了些解决办法，基本思路应该是将innerHTML中的所有内容取出，然后分析，将其中的<script>内容取出，执行

作者 andot 的分析内容比较全面，需要注意的有几个问题

1.跨浏览器的兼容性的问题，在IE浏览器的情况下，只要在innerHTML里的script里加上defer属性即可，语法如下<script defer></script>,不过在其他浏览器下无效

2.如果IE的<script>在innerHTML开头，会忽略掉，其他浏览器正常，解决办法是判断浏览器是否为IE，如果是IE则加上一些空的HTML标签

 

其余解决中细节问题，在作者原文中有描述