让插入到 innerHTML 中的 script 跑起来的代码第2/2页
更新时间：2007年11月20日 15:04:06 作者：
如果按照前面的方式实现，对于大多数脚本来说可以正常执行了。但是如果 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
相关文章
今天有工作人员反馈后台编辑文章的时候，多按了几下退格键，然后当前编辑的页面都返回到上一页了，导致刚刚添加的内容全部丢失，今天正好有空给整理一下2019-02-02
这篇文章主要介绍了JavaScrip数组去重操作,结合实例形式总结分析了javascript针对数组的遍历、判断、去重等相关操作技巧,需要的朋友可以参考下2019-06-06
今天小编就为大家分享一篇原生JS实现DOM加载完成马上执行JS代码的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
js几个不错的函数 $$()...2006-10-10
网上看到许多关于八皇后算法的文章，很少能看到使用javascript来实现的，今天就给大家使用javascript来解决下这个问题，有需要的小伙伴可以参考下。2015-04-04
headjs其实是一整套的工具，本文介绍的是它其中的Javascript Loader功能。需要的朋友可以参考下2016-11-11
这篇文章主要介绍了JavaScript如何禁止Backspace键，可以帮助大家解决“只读输入框在IE下按下Backspace键回退到前一个页面”的问题，感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要为大家详细介绍了JS实现五星好评效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了JS+Canvas实现的俄罗斯方块游戏,结合完整实例形式分析了Canvas技术实现俄罗斯方块游戏的步骤、技术难点与相关实现技巧,需要的朋友可以参考下2016-12-12
下面小编就为大家带来一篇js方法数据验证的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
最新评论